如何 return react-query 中来自 useQuery 的请求函数

Question

我有一个 React 挂钩，return 是一个调用 API

的请求函数

它有以下代码：

export const useGetFakeData = () => {
  const returnFakeData = () =>
    fetch('https://fake-domain.com').then(data => console.log('Data arrived: ', data))

  return returnFakeData
}

然后我在类似这样的组件中使用这个钩子

const getFakeData = useGetFakeData()

useEffect(() => getFakeData(), [getFakeData])

当我们需要return来自自定义钩子的请求函数时，如何在react-query中实现这种效果？

感谢任何建议！

Answer 1

如果你想使用命令式的方式请求数据，你可以使用useMutation hook。从钩子返回的 data 是突变调用的最新解析值：

const [mutate, { data, error }] = useMutation(handlefunction);

useEffect(() => {
  mutate(...);
}, []);

Answer 2

我认为您只是在寻找标准的反应查询行为，即在组件安装时触发请求（除非您禁用查询）。在您的示例中，这只是：

export const useGetFakeData = () =>
  useQuery('fakeData', () => fetch('https://fake-domain.com'))
}


const { data } = useGetFakeData()

请注意，这只是一个简单的最小示例：

如果您对提取有依赖性，它们应该 go into the query key
为了使用 fetch 进行正确的错误处理，您必须 transform the result to a failed Promise

Answer 3

深入研究文档，我发现 useQuery 钩子中的 React-Query 提供了一个 refetch() 函数。

在我的例子中，我只是将属性 enabled 设置为 false（只是为了不自动调用 mount 时的函数），只是 return 像这样的请求函数

export const useGetFakeData = () => {
  const { refetch } = useQuery<void, Error, any>({
    queryFn: () =>
      fetch('https://fake-domain.com').then(data => console.log('Data arrived: ', data)),
    queryKey: 'fake-data',
    enabled: false,
  })

  return refetch
}

如何 return react-query 中来自 useQuery 的请求函数

How to return a request function from useQuery in react-query

reactjs

react-query