[react] (not reproducible) onSuccess is unexpectedly fires AFTER render

[romeerez]

Probably it's not a bug but the way it was designed, but could anyone at least update the docs to warn people of this behavior?

Here is the issue I've got into, spent time debugging it. So updating the docs will help others.

const { isLoading, error } = useQuery('token', () => getToken(), {
   onSuccess: setTokenToAxios
})

const { data } = useQuery('authorized-request', () => callAPI(), {
  enabled: !isLoading && !error
})

What this code does:

1. loads a token
2. on success, set the token to axios instance to use in following requests
3. once token is loaded, it calls API, token must be set to axios at this point

The code looks alright, but there is a bug. A data race kind of bug, that breaks from time to time.

Because most of the time 2 happens before 3, but sometimes 3 happens earlier than 2.

While debugging, I found out that react-query is re-rendering the component BEFORE calling onSuccess, and this is a big surprise because why would it do so?

The callback can be called synchronously right after the loading function resolved the value, so I was expecting that react-query does exactly this, because otherwise it doesn't make sense to me. And leads to such unexpected bugs and happy debugging time with a code that looks alright.

Instead, re-render happens first, and onSuccess fires after some delay. So react-query seems to be working in such order:

• await loader function
• setState to re-render component
• useEffect is calling the callback

Is my assumption right? Should I create an issue for this, or maybe missing something?

[TkDodo]

While debugging, I found out that react-query is re-rendering the component BEFORE calling onSuccess, and this is a big surprise because why would it do so?

not sure, I don't really see where this would be happening. Can you reproduce this in codesandbox?

On another note - why don't you just call setTokenToAxios inside the queryFn afer the fetch ?

[romeerez]

I tried to reproduce in codesandbox I and cannot, I installed the same version and coded same situation.

And in fact, onSuccess works exactly as expected, and the bug must be somewhere else, I have no idea what else it could be.

In my app, I put console.log in onSuccess and second console.log in component to log isLoading, and isLoading: false was appearing before the log of onSuccess. But it is not reproducible in codesandbox.

Yes, it was solved by placing setToken to queryFn.

[louis-young]

Hi 👋

What does setTokenToAxios look like? You're calling the function, not passing a reference to it to onSuccess. I wonder if this is causing the unexpected behaviour.

[romeerez]

Hi, it's a synchronous function to remember the token, nothing special in it.

Oops, you're right, it's a mistake in the code above. I'm updating it to remove redundant (). It is a mistake only in this github example, because in the app TS would let me know that I'm not passing required argument to it.