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

Question

I have a React hook that returns a request functions that call an API

It has the following code:

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

  return returnFakeData
}

And then I use this hook in component something like this

const getFakeData = useGetFakeData()

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

How to achieve this effect in react-query when we need to return a request function from custom hook?

Thanks for any advice!

score 1 · Accepted Answer · answered Oct 25 '21 at 08:40

Digging in docs, I find out that React-Query in useQuery hook provide a refetch() function.

In my case, I just set property enabled to false (just so that the function when mount is not called automatically), and just return a request-function like this

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
}

score 0 · Answer 2 · answered Oct 21 '21 at 14:23

0

You can use useMutation hook if you want to request the data using the imperative way. The data returned from the hook is the latest resolved value of the mutation call:

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

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

answered Oct 21 '21 at 14:23

NearHuscarl

66,950
18
261
230

Do you think this is truly mutation? I was thinking that mutation is a process on changing something, registration process via POST methods for example, not the GET request – Boris Lebedev Oct 21 '21 at 14:27
@BorisLebedev `useMutation` is suitable for post/put/delete actions because it's natural to execute them in the imperative way (when you click the delete button, you **order** the mutate function to do sth). `useQuery` is suitable for fetching data because it's the the declarative way to use in react - when the component mounts, you declare the props and the shape of data and how the data should display inside the component. It doesn't mean that you're forbidden to use `useMutation` to fetch data, it's just not a conventional way to do so,... – NearHuscarl Oct 21 '21 at 14:45
@BorisLebedev and since your question ask for a way to request the data the imperative way, you can use this `useMutation` approach. See the differences between imperative/declarative [here](https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js) – NearHuscarl Oct 21 '21 at 14:46

score 0 · Answer 3 · answered Oct 22 '21 at 17:54

I think you are just looking for the standard react-query behaviour, which is to fire off a request when the component mounts (unless you disable the query). In your example, that would just be:

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


const { data } = useGetFakeData()

Please be advised that this is just a bare minimal example:

if you have dependencies to your fetch, they should go into the query key
for proper error handling with fetch, you'll have to transform the result to a failed Promise

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

3 Answers3