Dependant queries

[stromkalle]

Describe the bug

Dependant queries leave an in between state after the first query has succeeded where the first query has a successful status and the following query is still in idle.

To Reproduce

const queryA = useQuery("queryA", fetchSomething);
const queryB = useQuery("queryB", fetchSomethingElse, { enabled: queryA.isSuccess });

console.log(queryA.status, queryB.status);

// loading idle
// success idle
// success loading

Expected behavior
I expect there to be no inbetween state and for queryB to go into a loading state as soon as queryA has succeeded. Expected console log would be:

// loading idle
// success loading
// success success

Desktop (please complete the following information):

• OS: macOS Catalina
• Chrome
• Version: 3.2.0

[tannerlinsley]

This is purely because we use safe side effects as opposed to mutating or altering state during a render. If we were to do the opposite, you’d get some really really strange behavior, especially if and when you start using suspense.

Curious why this is an issue for you?

[stromkalle]

This is purely because we use safe side effects as opposed to mutating or altering state during a render. If we were to do the opposite, you’d get some really really strange behavior, especially if and when you start using suspense.

Curious why this is an issue for you?

Well, with something like this you end up seeing the loader flash, but perhaps there is some easy workaround that im missing?

<Loader visible={queryA.isLoading || queryB.isLoading} />

Also, I believe it used to work as the expected behaviour I presented.

[tannerlinsley]

Hmm. I’ll take a deeper look.

[TkDodo]

I checked against v2.26.4, it prints:

loading idle 
success loading 
success loading 
success success 

(success loading is printed twice). also, every window re-focus prints success success 3 times, so there seem to be 3 re-renders. repro: https://codesandbox.io/s/charming-frog-kz4cd

v3.2.0 prints, as OP says:

loading idle 
success idle 
success loading 

every window re-focus also prints success success 3 times (not sure if this is a separate issue?)
repro: https://codesandbox.io/s/focused-hertz-yi541

[boschni]

The returned values from the hooks in v3 are read from the component state instead of directly from the observer. This will make sure no state update is skipped. So when using a hook, you can be sure you will be notified of all changes. I guess this could be important when dealing with side effects. The downside of this though, is that no state update is skipped ;) When rendering, the observer might already contain a newer state, which could be used instead of the component state, but any states in between will then never be rendered.

[TkDodo]

so how would we go about queryA.isLoading || queryB.isLoading ? I think this is a very valid use-case when dealing with dependent queries

[boschni]

I guess the only way to prevent this is to immediately returning the updated value instead of waiting for the state to update. Let me see what I can do here.

[stromkalle]

Cheers guys!