TkDodo 的博客

TanStack Query 维护者 TkDodo 发表了一系列关于使用和操作该库的博客文章。有些文章展示了通用的最佳实践，但大多数都带有_主观_观点。

#1：实用的 React Query

React Query 的高级入门，展示了超出文档范围的实用技巧。它涵盖了解释默认值（staleTime 与 gcTime）、诸如保持服务器和客户端状态分离、处理依赖项和创建自定义钩子等概念，以及概述了为什么 enabled 选项非常强大。阅读更多...

#2：React Query 数据转换

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

#3：React Query 渲染优化

让我们看看当您的组件在使用 React Query 时重新渲染过于频繁时可以做些什么。该库已经非常优化，但仍有一些可选功能（如跟踪查询）可用于避免 isFetching 转换。我们还将研究结构共享指的是什么。阅读更多...

#4：React Query 中的状态检查

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

#5：测试 React Query

文档已经很好地介绍了开始测试 React Query 时需要执行的操作。本文展示了一些额外的技巧（例如关闭重试或静默控制台），您在测试自定义钩子或使用它们的组件时可能需要遵循这些技巧。它还链接到一个示例存储库，其中包含由 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 属性、使用错误边界或 onError 回调，以便您可以为应用程序准备好应对“出现问题”的情况。阅读更多...

#12：掌握 React Query 中的变更

变更是处理服务器数据所必需的重要第二部分——用于需要更新数据的情况。这篇博文介绍了什么是变更以及它们与查询有何不同。您将了解 mutate 和 mutateAsync 之间的区别，以及如何将查询和变更联系起来。阅读更多...

#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 一起使用时获得最佳的类型安全性 阅读更多...