TkDodo 的博客

TanStack Query 的维护者 TkDodo 撰写了一系列关于使用和操作该库的博客文章。其中一些文章介绍了通用的最佳实践，但大多数文章都带有主观的视角。

#1: 实用 React Query

这是一篇关于 React Query 的高级介绍，其中包含了一些超出文档范围的实用技巧。它涵盖了默认值的解释（staleTime 与 gcTime），像保持服务器和客户端状态分离、处理依赖关系和创建自定义 hooks 等概念，并概述了 enabled 选项为何如此强大。阅读更多...

#2: React Query 数据转换

学习使用 React Query 执行数据转换的各种可能性，这是一个非常常见且重要的任务。从在 queryFn 中进行转换，到使用 select 选项，本文概述了所有不同方法的优缺点。阅读更多...

#3: React Query 渲染优化

让我们来看看在使用 React Query 时，当组件过于频繁地重新渲染时，你可以做些什么。该库本身已经非常优化，但仍有一些可选功能（如 tracked queries），你可以使用它们来避免 isFetching 的切换。我们还将探讨 structural sharing 的含义。阅读更多...

#4: React Query 中的状态检查

我们通常会先检查 isPending，然后再检查 isError，但有时，检查 data 是否可用应该是首要任务。本文展示了错误的状态检查顺序如何对用户体验产生负面影响。阅读更多...

#5: 测试 React Query

官方文档已经很好地涵盖了测试 React Query 的入门知识。本文介绍了一些额外的技巧（例如关闭 retries 或静默 console），当你测试自定义 hooks 或使用它们的组件时，你可能会遵循这些技巧。它还链接到一个带有成功和错误状态测试的示例仓库，该仓库由 mock-service-worker 提供支持。阅读更多...

#6: React Query 与 TypeScript

由于 React Query 是用 TypeScript 编写的，因此它对 TypeScript 有很好的支持。这篇博文解释了各种泛型，如何利用类型推断来避免显式键入 useQuery 及其相关函数，如何处理 unknown 错误，类型收窄如何工作等等！阅读更多...

#7: 使用 WebSockets 和 React Query

这是一份关于如何使用 React Query 实现实时通知的分步指南，可以使用基于事件的订阅或直接将完整数据推送到客户端。适用于从浏览器原生 WebSocket API 到 Firebase，甚至 GraphQL 订阅的各种场景。阅读更多...

#8: 有效的 React Query 键

大多数示例仅使用简单的字符串或数组查询键，但当你的应用程序规模超出待办事项列表时，如何有效地组织你的键？本文介绍了共同定位和查询键工厂如何使生活更轻松。阅读更多...

#8a: 利用查询函数上下文

在这篇对上一篇博文的补充中，我们将探讨如何利用查询函数上下文和对象查询键，在应用程序不断增长时实现最大程度的安全。阅读更多...

#9: React Query 中的占位符和初始数据

占位符数据和初始数据是两个相似但又不同的概念，用于同步显示数据而不是加载微调器，以改善应用程序的用户体验。这篇博文比较了两者，并概述了它们各自适用的场景。阅读更多...

#10: React Query 作为状态管理器

React Query 本身不为你获取任何数据 - 它是一个数据同步工具，在用于服务器状态时表现出色。本文包含了让 React Query 成为你的异步状态管理器单一数据源所需的一切。你将学会如何让 React Query 发挥其魔力，以及为什么自定义 staleTime 可能是你所需要的一切。阅读更多...

#11: React Query 错误处理

错误处理是处理异步数据（尤其是数据获取）的内在部分。我们必须面对它：并非所有请求都会成功，并非所有 Promise 都会被履行。这篇博文描述了在 React Query 中处理错误的各种方法，例如 error 属性、使用 Error Boundaries 或 onError 回调，以便你可以为“出现问题”的情况做好应用程序的准备。阅读更多...

#12: 精通 React Query 中的 Mutations

Mutations 是处理服务器数据的第二部分，用于需要更新数据的情况。这篇博文涵盖了 mutations 是什么以及它们与 queries 有何不同。你将学会 mutate 和 mutateAsync 之间的区别，以及如何将 queries 和 mutations 联系起来。阅读更多...

#13: 离线 React Query

生成 Promise 的方法有很多——这正是 React Query 所需要的——但最大的用例是数据获取。通常，这需要有效的网络连接。但有时，尤其是在网络连接可能不可靠的移动设备上，你需要应用程序也能离线工作。在本文中，你将了解 React Query 提供的各种离线策略。阅读更多...

#14: React Query 与表单

表单往往会模糊服务器状态和客户端状态之间的界限。在大多数应用程序中，我们不仅希望显示状态，还希望允许用户与之交互。本文展示了两种不同的方法以及一些关于将 React Query 与表单一起使用的技巧。阅读更多...

#15: React Query 常见问题解答

本文试图回答关于 React Query 最常见的问题。阅读更多...

#16: React Query 与 React Router

Remix 和 React Router 正在改变关于*何时*获取数据的想法。本文将深入探讨为什么 React Query 和支持数据加载的 Router 是天作之合。阅读更多...

#17: 预填充查询缓存

这篇博文展示了多种方法，可以在开始渲染*之前*将数据放入你的查询缓存中，以最大限度地减少应用程序中显示的加载微调器数量。选项包括在服务器或路由器上预取，以及通过 setQueryData 预填充缓存条目。阅读更多...

#18: React Query 内部

如果你曾经想知道 React Query 在底层是如何工作的——这篇文章就是为你准备的。它解释了架构（包括图示），从与框架无关的 Query Core 开始，以及它如何与特定于框架的适配器进行通信。阅读更多...

#19: 类型安全的 React Query

“拥有类型”和“类型安全”之间有很大区别。本文试图概述这些区别，并展示如何在使用 React Query 和 TypeScript 时获得最佳的类型安全性。阅读更多...

#20: 你可能不需要 React Query

如果你的应用程序不依赖于客户端数据获取，尤其是在使用 Next.js 或 Remix 等带有内置服务器组件的框架时，React Query 可能是不必要的。尽管如此，它在混合使用场景（如无限滚动或离线支持）中仍然表现出色，其智能缓存和重新验证功能非常有价值。阅读更多...

#21: React Query 思维方式

React Query 不是一个数据获取库——它是一个异步状态管理器，旨在将参数视为依赖项，通过 staleTime 优化重新获取行为，并鼓励以 queryKey 驱动缓存和更新的声明式模式。思维方式的微小转变可以极大地简化你使用 React Query 的方式。阅读更多...

#22: React Query 与 React Context

React Query 允许组件独立管理自己的数据，使其具有自给自足和弹性。但当更深层组件需要共享数据（如在上方获取的用户信息）时，React Context 可以使这种隐式依赖关系显式化并更安全。阅读更多...

#23: 为什么你需要 React Query

虽然在 useEffect 中使用 fetch 获取数据看似简单，但很快就会出现竞态条件、缺少加载状态、陈旧数据和 Strict Mode 的怪异行为等 bug，使得异步状态管理比看起来要复杂得多。阅读更多...

#24: 查询选项 API

React Query v5 引入了一个统一的“查询选项”API——所有函数，如 useQuery、invalidateQueries 和命令式调用都接受一个单一对象——简化了接口，并使跨不同查询上下文的重用更加容易，同时提高了类型安全性。阅读更多...

#25: Mutations 后自动使查询失效

React Query 不会自动将 mutations 与 queries 绑定——但你可以利用中央 MutationCache 中的“全局缓存回调”来定义共享行为，例如在每次 mutation 时使查询失效。阅读更多...

#26: 无限查询如何工作

这篇博文深入探讨了 Infinite Queries 的设计和工作原理。有趣的是，并没有一个独立的 InfiniteQuery 表示——只是附加到常规 Queries 上的不同“行为”。阅读更多...

#27: React Query API 设计 - 经验教训

在这场讲座中，Dominik 带领我们回顾了 React Query 在 API 设计方面的一些选择，以实现其可以说是优秀的用户体验。你将听到关于哪些方面做得好，也关于所做的权衡和错误，以及我们都能从中吸取的教训。阅读更多...

#28: React Query - 缺点

在这场讲座中，Dominik 探讨了 React Query 不那么令人称道的一面以及它可能不是最佳选择的情况。没有完美的库；每个选择都有取舍。听完这场讲座，你将对 React Query 的局限性有更好的理解，以及为什么尽管存在这些局限性，它仍然是一个有吸引力的选择。阅读更多...

#29: React Query 中的并发乐观更新

React Query 中的乐观更新在多个 mutations 同时运行时可能导致竞态条件，从而导致 UI 状态不一致。取消进行中的 queries 有所帮助，但重叠的无效化可能仍然会覆盖较新的更新。阅读更多...

#30: React Query Selectors，超级增强

React Query 的 select 选项允许组件仅订阅其关心的查询数据的特定部分——因此更新一个字段不会不必要地导致不相关的 UI 重新渲染。这种细粒度的方法可以在缓存中保留完整的响应，同时优化组件更新以提高性能。阅读更多...