2

我已经编写了一个包装器fetch，可以让我处理来自我的 API 的错误状态，如 401。当它收到错误时，自定义 fetch 函数使用反应挂钩设置一些状态。

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

当我使用 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(...))
}

但是，我觉得这有点混乱，如果可能的话，我希望将查询/变异函数分开。

有谁知道我可以采取一种方法让我apiFetch的功能在 react-query 的功能中可用吗？

4

1 回答 1

2

如果您不想在多个组件中重复调用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 (...);
}
于 2021-10-24T05:06:24.790 回答