Multiple query instances sometimes return data in one instance and undefined in another

[ca057]

Not sure if this should be a bug report, but this is something we’re struggling in our application with. I cannot reproduce this behaviour yet and we can only observe it from our error tracking.

What is happening?

We pre-fetch all of our data and use a dedicated loading screen while our data is getting fetched. This works normally, so we can always assume that subsequent screens have all data present (= all data present in the cache). There are some occasions though, where this assumption do not hold: We see in our error tracking, that some users land on a screen after successful pre-fetching and the data from the cache is returned as undefined.

A similar issue appeared recently which should make this more clear. We have a home screen, displaying some content of the user. We store all data of the user in user cache and use hooks to create derived states from it (in pseudo-code):

const useUser = () => useQuery({ cacheKey: ["user"] }) // --> assume the full setup of our query
const useDerivedUserData = () => {
  const {data} =  useUser() // --> we read from the user cache
  return data.someDerivedState // --> and derive some state from it
}

What happened now is that on our home screen we have multiple instances of the “derived data hook“, where the first one successfully returned its data and the second one returned undefined (our React tree in pseudo-code):

<HomeScreen>
  const user = useUser()
  const derivedData = useDerivedUserData() // <-- returns truthy data

  return <SomeChildComponent>
           const derivedDataInChildComponent = useDerivedUserData() // <-- returns sometimes `undefined`

It’s important to note that the user cache in the hook where we derive the data is not always returning undefined, it’s just in some occasions for some users I cannot boil down to a specific reproduction. As we assume data is present in the child component, our app might run into an error when data is not present.

My question

Is it possible that a query has a populated cache, but is still returning undefined initially (even in just a first render cycle and the data is potentially returned in a second render cycle)?

When I have multiple instances, shouldn’t all queries return either their data or all return undefined?

[TkDodo]

Is it possible that a query has a populated cache, but is still returning undefined initially

nope.

shouldn’t all queries return either their data or all return undefined?

yes.

---

Please make sure that you have a stable query client: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

[ca057]

Thanks for the fast reply!

After going through different issues yesterday I also confirmed that and we have indeed a stable queryClient (global variable declared outside a component).

[TkDodo]

Then sorry I don't have many ideas what could cause this. Unused Queries are garbage collected after gcTime has elapsed, which defaults to 5 minutes. So after 5 minutes, you can get undefined again. But that's because there is no cached data. The devtools would show that.

[ca057]

Thanks! Judging by the timing from the error tracking it shouldn’t be garbage collected, as the gcTime is set to a higher value.