如何一次全局处理所有 React 查询的错误并重新获取？

Question

例如，我想处理当前在我的 React 应用程序中运行的所有查询的过期访问令牌错误。

1. 我需要全局捕获过期的访问令牌错误
2. 取消其他很快会抛出相同错误的查询
3. 在上下文中更新访问令牌
4. 使所有失败/取消的查询无效并使用新的访问令牌重新获取。

有没有 React Query 提供的方法？ 你能举个简单的例子说明如何实现吗？

Answer 1

React Query 在 QueryCache 和 MutationCache 级别具有全局事件处理程序，它们是使用您的 QueryClient 创建的：

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onSuccess,
    onError,
  }),
  mutationCache: new MutationCache({
    onSuccess,
    onError,
  })
})

对于每个查询/突变，这些事件处理程序将在每个查询/突变中调用一次。

另见：

• https://tanstack.com/query/v4/docs/react/reference/QueryCache#global-callbacks
• https://tanstack.com/query/v4/docs/react/reference/MutationCache#global-callbacks
• https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks