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 中的占位符和初始数据

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

#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: 预填充查询缓存

这篇博文展示了多种方法，可以在开始渲染之前将数据放入您的查询缓存中，以最大程度地减少应用程序中显示的加载微调器数量。选项包括在服务器或路由器上预取，以及通过 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 表示——只是附加到常规 Query 的一种不同的“行为”。 阅读更多...

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

在这次演讲中，Dominik 带领我们回顾了 React Query 中做出的一些 API 设计选择，以实现其公认的良好开发者体验。您将听到关于顺利进行的事务的故事，也关于权衡和错误，以及我们所有人都可以从中吸取的教训。 阅读更多...

#28: React Query - 缺点

在这次演讲中，Dominik 探讨了 React Query 的不太理想的方面以及它可能不适合的情况。没有完美的库；每个选择都涉及权衡。在演讲结束时，您将更好地理解 React Query 的局限性，以及为什么尽管存在这些局限性，它仍然是一个引人注目的选择。 阅读更多...

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

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

#30: React Query Selectors，超级增强

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