如何在 react-query 中从 useQuery 返回请求函数

Question

我有一个 React 钩子，它返回一个调用 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])

当我们需要从自定义钩子返回请求函数时，如何在 react-query 中实现这个效果？

感谢您的建议！

Answer 1

在文档中挖掘，我发现 useQuery 钩子中的 React-Query 提供了一个 refetch() 函数。

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

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
}

Answer 2

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

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


const { data } = useGetFakeData()

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

• 如果你的 fetch 有依赖关系，它们应该 go into the query key
• 要正确处理 fetch 错误，您必须 transform the result to a failed Promise

Answer 3

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

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

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