概述

TanStack Query（曾用名 Preact Query）常被描述为 Web 应用中缺失的数据拉取库；更准确地说，它让 Web 应用中的拉取、缓存、同步和更新服务端状态变得轻而易举。

设计动机

大多数核心 Web 框架并未提供一种统一、明确的数据拉取或更新方式。因此，开发者往往要么构建封装了严格数据拉取约定的元框架，要么自行发明数据拉取方法。这通常意味着将基于组件的状态与副作用拼凑在一起，或借助更通用的状态管理库，在整个应用中存储并提供异步数据。

尽管大多数传统状态管理库在处理客户端状态（client state）方面表现出色，但它们在处理异步状态或服务端状态（server state）时却表现不佳。这是因为服务端状态截然不同。首先，服务端状态：

• 存储于远程位置，你可能无法控制或拥有该位置；
• 需通过异步 API 进行拉取与更新；
• 具有共享所有权特性，可能在你不知情的情况下被他人修改；
• 若不加留意，你的应用中该状态就可能变得“过期”。

一旦你理解了应用中服务端状态的本质，后续还会面临更多挑战，例如：

• 缓存……（编程中可能最难实现的功能之一）；
• 将针对同一数据的多次请求去重为单次请求；
• 在后台更新“过期”的数据；
• 判定数据何时“过期”；
• 尽快反映数据更新；
• 分页与懒加载等性能优化；
• 服务端状态的内存管理与垃圾回收（garbage collection）；
• 使用结构共享（structural sharing）对查询结果进行记忆化（memoizing）。

如果你看完这份清单仍未感到压力山大，那说明你很可能已解决了所有服务端状态问题，理应获得嘉奖。然而，如果你和绝大多数开发者一样，尚未应对甚至仅触及其中部分挑战——那么我们才刚刚揭开冰山一角！

TanStack Query 毫无疑问是管理服务端状态的最佳库之一。它开箱即用、零配置，并能随应用规模增长而灵活定制。

TanStack Query 能助你攻克服务端状态带来的种种棘手挑战与障碍，让你掌控应用数据，而非被数据所控。

从技术角度看，TanStack Query 很可能：

• 帮你从应用中移除大量复杂且易被误解的代码，仅需寥寥数行 TanStack Query 逻辑即可替代；
• 让应用更易维护，并在开发新功能时无需操心新服务端状态数据源的接入；
• 直接提升终端用户体验，使应用响应更快、感觉更流畅；
• 潜在地节省带宽并提升内存性能。

少说多做，快让我看看代码！

下方示例展示了 TanStack Query 最基础、最简洁的用法：拉取 TanStack Query 自身 GitHub 项目的统计信息：

在 StackBlitz 中打开

1import {2  QueryClient,3  QueryClientProvider,4  useQuery,5} from '@tanstack/preact-query'6 7const queryClient = new QueryClient()8 9export default function App() {10  return (11    <QueryClientProvider client={queryClient}>12      <Example />13    </QueryClientProvider>14  )15}16 17function Example() {18  const { isPending, error, data } = useQuery({19    queryKey: ['repoData'],20    queryFn: async () => {21      const response = await fetch(22        'https://api.github.com/repos/TanStack/query',23      )24      if (!response.ok) throw new Error('Failed to fetch repo data')25      return response.json()26    },27  })28 29  if (isPending) return 'Loading...'30 31  if (error) return 'An error has occurred: ' + error.message32 33  return (34    <div>35      <h1>{data.name}</h1>36      <p>{data.description}</p>37      <strong>👀 {data.subscribers_count}</strong>{' '}38      <strong>✨ {data.stargazers_count}</strong>{' '}39      <strong>🍴 {data.forks_count}</strong>40    </div>41  )42}

好，我被你说服了——那接下来呢？

• 不妨报名官方的 TanStack Query 课程（也可以给整个团队一起买！）。
• 用我们极为详尽的 分步指南 和 API 参考文档，按自己的节奏学 TanStack Query。
• 看看这篇文章：为什么你需要 Preact Query。