React Query execute mutation after query is fetched

Question

Let's say I have a query, useFetchUser() and a mutation, useMutateUser(). When my component is rendered I want to fetch the current user and then execute the mutation after the query completion. So I have something like this:

   const {data} = useFetchUser()
   const {mutate} = useMutateUser()

   useEffect(() => {
      if(data) {
        mutate() 
     }
   }, [data, mutate])

Now when I check in the network tab I see that the mutation starts while the query is still pending. What am I doing wrong?

hard to say without knowing what the custom hooks are doing. since data will be undefined for as long as the query is initially loading, your condition prevents the mutation from running. Generally, I would put side effects into the onSuccess callback of the query. — TkDodo
– TkDodo, Commented Jul 2, 2021 at 14:46
You should debug with console logs inside the useEffect, you could console log isLoading and data fro example. — abumalick
– abumalick, Commented Jul 4, 2021 at 14:53

hg.ricardo · Accepted Answer · 2021-09-24 22:13:17Z

1

You can send react-query options to your hook useFetchUser() in params and take advantage of onSuccess callback:

const useFetchUser = (options = {}) => {
    return useQuery(yourKey, () => fetchUser(), {...options})
}

And consume like this:

const {mutate} = useMutateUser()
const {data} = useFetchUser({onSuccess: mutate()})

answered Sep 24, 2021 at 22:13

hg.ricardo

413 bronze badges

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

Collectives™ on Stack Overflow

React Query execute mutation after query is fetched

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related