在react- query的查询函数中修改状态
提问于 2021-10-23 17:59:19
我已经围绕fetch编写了一个包装器，它允许我像处理401一样处理我的API中的错误状态。当出现错误时，自定义fetch函数会使用react钩子设置一些状态。
因为我在函数中使用钩子，所以我不能正常导入它。因此，我使用上下文传递这个封装的函数。
当我使用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的函数中可用？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-23 21:06:25
如果不想在多个组件中重复调用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 (...);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69693354
复制相关文章
![首选dns协议版本6怎么填服务器,首选dns怎么填服务器？[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/ac67051d896adfa856a124db3202d04b.jpeg)
腾讯云开发者
