cacheDataLoaded resolved after isLoading

[victorwedo]

Imagine I have an API with two endpoints:

• /todos which returns Todo[]
• /todos/<id> which return Todo

When I'm calling the /todos query, I want to update the cache of the individual /todos/<id> queries.

At the moment I use the onCacheEntryAdded callback on the getTodos query. I wait for cacheDataLoaded to resolve and then I use patchQueryData to patch the getTodo query.

I've recreated this example here: https://codesandbox.io/s/serene-kepler-vg8qy

When running the example, you can see a request is made to /todos, but you can also see many requests to the /todos/<id> endpoint.

In App.tsx, it seems that the isLoading flag switch to false before cacheDataLoaded resolves. Thus the <Todo/> components are rendered, and each one of them trigger a request to the /todos/<id> endpoint.

I would have imagined that cacheDataLoaded would resolve before the isLoading flag switches to false.

So is it the expected behavior? How would you have done that?

NB: I use patchQueryData instead of updateQueryData because updateQueryData only works when there is already some data in the cache.

[phryneas]

Yes, that is to be expected. cacheDataLoaded resolves as part of a middleware that reacts to the fulfilled action - and runs after the reducer, as the reducer is synchronous while cacheDataLoaded is a promise that will only resolve on the next tick.

To be honest, I don't think of a nice solution for you here from the back of my head. Personally, I would really not do any of that "filling up other endpoints from a result" things.
If you never want to make an actual request, useQueryState might be an option instead of useQuery.

[victorwedo]

Thank you for your response!

I was afraid that my sole option would be to use useQueryState, because some of my components would use useQuery and some others useQueryState.

So to keep it simple, and to make sure there is always data in my components, I will stick to pass my Todo object as a prop to my <Todo/> component for the moment.