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

Question

我在fetch周围编写了一个包装器，使我能够像处理401一样处理来自API的错误状态。当它得到一个错误时，自定义fetch函数使用react钩子设置一些状态。

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

当我使用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函数在反应查询的功能提供给我?

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 (...);
}