在 react-query 的查询函数中修改状态

Question

我已经围绕 fetch 编写了一个包装器，它可以让我像 401 一样处理来自 API 的错误状态。当出现错误时，自定义获取函数会使用反应挂钩设置一些状态。

因为我在函数中使用了钩子，所以我不能正常导入它。因此，我使用上下文传递这个包装函数。

当我使用 react-query 时，我想按以下方式使用这个包装函数：

function myQuery(key, apiFetch) {
  return apiFetch(...)
}

function MyComponent() {
  useQuery('key', myQuery)
}

在此示例中，apiFetch 是查询函数中的一个可用参数。

我在这里的一个选择是像这样内联函数：

function myQuery(key, apiFetch) {
  return apiFetch(...)
}

function MyComponent() {
  const apiFetch = useApiFetch();
  useQuery('key', (key) => apiFetch(...))
}

不过我觉得这有点乱，如果可能的话，我想将 query/mutation 函数分开。

有谁知道我可以采取什么方法让我的 apiFetch 函数在 react-query 的函数中可用？

Answer 1

如果您不想在多个组件中重复调用 useApiFetch 和 useQuery 挂钩，您可以将这两个挂钩提取到另一个将 react-query 与您的 fetch 挂钩集成的自定义挂钩中：

function useApiQuery(param) {
  const apiFetch = useApiFetch();
  return useQuery(['key', param], (key) => apiFetch(...))
}

然后在你的组件中使用它：

function MyComponent({ param }) {
  const { data, error } = useApiQuery(param);
  
  return (...);
}

在 react-query 的查询函数中修改状态

Modifying state in react-query's query function

reactjs

react-hooks

react-query