TkDodo 的博客

TkDodo 的博客

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

#1: Practical React Query

React Query 的高级介绍，展示了超出文档范围的实用技巧。它涵盖了解释默认值 (staleTime 与 gcTime) 、保持服务器和客户端状态分离等概念、处理依赖关系和创建自定义 Hook，以及概述了 enabled 选项为何如此强大。阅读更多...

#2: React Query Data Transformations

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

#3: React Query Render Optimizations

让我们看看当使用 React Query 时，你的组件重新渲染过于频繁时可以做些什么。该库已经相当优化，但仍然有一些可选功能（如 tracked queries），你可以使用它们来避免 isFetching 过渡。我们还将研究 structural sharing 指的是什么。阅读更多...

#4: Status Checks in React Query

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

#5: Testing React Query

文档已经很好地介绍了在开始测试 React Query 时需要做的事情。本文展示了一些额外的技巧（例如关闭 retries 或静默 console），你可能希望在测试自定义 Hook 或使用它们的组件时遵循这些技巧。它还链接到一个示例仓库，其中包含成功和错误状态的测试，由 mock-service-worker 提供支持。阅读更多...

#6: React Query and TypeScript

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

#7: Using WebSockets with React Query

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

#8: Effective React Query Keys

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

#8a: Leveraging the Query Function Context

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

#9: Placeholder and Initial Data in React Query

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

#10: React Query as a State Manager

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

#11: React Query Error Handling

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

#12: Mastering Mutations in React Query

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

#13: Offline React Query

有很多方法可以生成 promise - 这正是 React Query 所需的一切 - 但到目前为止，最大的用例是数据获取。通常，这需要有效的网络连接。但有时，尤其是在网络连接可能不可靠的移动设备上，你需要你的应用程序在没有网络连接的情况下也能工作。在本文中，你将了解 React Query 提供的不同离线策略。阅读更多...