next.js 如何在react-query onError处理程序中使用钩子?

qrjkbowd  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(158)

我们使用Next.jsreact-query。我们想要做的是有一个全局查询设置,当对端点的调用由于访问令牌过期而失败时,它刷新令牌并重新运行查询。
错误模式应该是用户被重定向到登录。我们已经走了很长的路,使用内置于onErrorreact-query's和重试设置。
通过一个自定义函数,我们可以刷新令牌,然后再次尝试原始请求。但是,在再次尝试后,我们希望将用户重定向到登录页面。为此,我们需要Next中的useRouter,它是一个钩子react-query中的useQuery也是一个钩子
有没有办法将这两种方法结合起来,这样我们就可以在QueryClientonError内部使用路由器?或者这是完全错误的方法吗?
我们正在尝试的是这样的事情:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: () => router.push('/login'),
    }
  }
})

这可能吗?

67up9zun

67up9zun1#

您可以直接导入路由器示例,然后使用它来配置查询客户端。

import Router from 'next/router'
// ...

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: () => Router.push('/login'),
    }
  }
})

此处将对此进行讨论:Using next/router outside of components

相关问题