TkDodo 的博客

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

#1: 实用 React Query

React Query 的高级入门指南，展示了超越官方文档的实用技巧。它涵盖了对默认值（staleTime 与 gcTime）的解释，以及诸如保持服务器和客户端状态分离、处理依赖关系和创建自定义 Hook 等概念，同时还概述了 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），您在测试自定义 Hook 或使用它们的组件时可能会遵循这些技巧。它还链接到一个 示例仓库，其中包含成功和错误状态的测试，由 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 中的占位符和初始数据

Placeholder 和 Initial Data 是两个相似但不同的概念，用于同步显示数据而不是加载旋转器以改善应用程序的用户体验。这篇博文比较了两者，并概述了它们各自擅长的场景。阅读更多...

#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 和支持数据加载的路由器为何是天作之合。阅读更多...

#17: 预填充查询缓存

这篇博文展示了多种方法，可以在开始渲染之前将数据加载到您的 Query Cache 中，以最大程度地减少应用程序中显示的加载旋转器的数量。选项包括从服务器或路由器上的预取，到通过 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 获取数据似乎很简单，但很快就会出现诸如竞态条件、缺失的加载状态、过时数据和严格模式怪癖等 bug——这使得异步状态管理比看起来要复杂得多。阅读更多...

#24: 查询选项 API

React Query v5 引入了一个统一的“Query Options”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 中的乐观更新在多个 mutation 同时运行时会导致竞态条件，从而导致 UI 状态不一致。取消进行中的查询会有所帮助，但重叠的失效可能仍会覆盖较新的更新。阅读更多...

#30: React Query Selectors，超级增强

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