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 编写的，因此它对其有很好的支持。这篇博客文章解释了各种泛型，如何利用类型推断来避免必须显式键入 useQuery 及其朋友，如何处理 unknown 错误，类型缩小如何工作等等！阅读更多...

#7: 将 WebSockets 与 React Query 结合使用

关于如何使实时通知与 React Query 一起工作的分步指南，可以使用基于事件的订阅或将完整数据直接推送到客户端。适用于从浏览器原生 WebSocket API 到 Firebase 甚至 GraphQL 订阅的任何内容。阅读更多...

#8: 有效的 React Query 键

大多数示例仅使用简单的字符串或数组查询键，但是一旦你的应用程序增长超过待办事项列表，你如何有效地组织你的键？本文展示了位置协同和查询键工厂如何使生活更轻松。阅读更多...

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

在前一篇博客文章的修正案中，我们将研究如何利用查询函数上下文和对象查询键来最大程度地保证应用程序增长的安全性。阅读更多...

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

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

#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 提供的不同离线策略。阅读更多...