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!

Boris Lebedev · Accepted Answer · 2021-10-25 08:40:17Z

1

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
}

answered Oct 25, 2021 at 8:40

Boris Lebedev

1433 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NearHuscarl · Accepted Answer · 2021-10-21 14:23:21Z

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, 2021 at 14:23

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

3 Comments

Boris Lebedev Over a year ago

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

NearHuscarl Over a year ago

@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 Over a year ago

@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

TkDodo · Accepted Answer · 2021-10-22 17:54:03Z

0

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

answered Oct 22, 2021 at 17:54

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related