Dependent query returns undefined when refetching

[goopi]

Hey @tannerlinsley,

I think I might have found a bug related to dependent queries and refetching (refetchAllOnWindowFocus: true)

Example to reproduce it:

const { data: token } = useQuery(['token', userId], getToken)
const { data: user } = useQuery(token ? ['user', token] : false, getUser)
console.log({ token, user })
...

When refetching I expect to get the previous —current— data but instead user is undefined. Is that the expected behaviour?

Two things I've noticed:

• The status of the user query is loading, unlike the status of token query which is always success
• user is undefined but query.state.data has the current data

[tannerlinsley]

Dependent Queries are always in a "success" state upon initialization, so long as a falsy query key is used. Only when the query key becomes truthy does a dependent query start the loading, success/error phases

[tannerlinsley]

The punctuate, this is intended behavior.

[goopi]

@tannerlinsley thanks for answering! In this case, when refreshing, the query key of the dependent query is valid (truthy) and it returns undefined; in case that is the intended behavior, is there a way to get the current value (query.state.data) to avoid changes in the UI?

[tannerlinsley]

Hmmm. I think you'll need to make a codesandbox to better explain what's happening.

[goopi]

Found the problem while creating the codesandbox! Thanks for you help!!

[narthur]

What was the solution?