getQueryData not updated on useQuery based on comp tree

[PaulKujawa]

Example: https://codesandbox.io/s/react-query-cache-uhcpf?file=/src/App.tsx

If I request data in L32 the cache does not become updated after the server response arrived, whereas if I put getQueryData into L20 it works just fine. Is this a bug or do I miss something obvious? I am irritated because both places are "just" functional, parent components. I don't see how this should differ.

Please note that codesandbox might need you to reload the page to update the view. I encountered this issue in my project first. So it's not related to the online editor.

[wolverineks]

are you expecting queryCache.getQueryData to rerender the component with the data changes?

[PaulKujawa]

@wolverineks yes, that is what I expect(ed). Does this not work? How do my two cases differ? Any help would be appreciated.

[wolverineks]

Comp2 is not passed as children to App, so when App rerenders, so does Comp2

[PaulKujawa]

I am sorry for my shamefully late reply. You're absolutely right! Having Comp1 render Comp2 as a render prop would solve this issue as well. But then, if queryCache.getQueryData is only good for snapshot values, how does one render a response in multiple components on a page without requesting it for each component?

[TkDodo]

Every component that wants to subscribe to changes can just do useGetPosts(). This does not mean that multiple requests are sent to the backend.

[Delamern]

What if useGetPosts() requires additional parameters to run the query that Comp1 has but Comp2 does not? Like if useGetPosts signature was something like useGetPosts(arg1, arg2, arg3) where all params are used in the query, and Comp2 has no idea what any of those arguments are?

[TkDodo]

@Delamern I think even Comp2 needs to be able to actually make the request to the backend - if it's the only component currently mounted, it will be making an actual request, so it needs to be aware of all the arguments to useGetPosts. Maybe a concrete example would help me understand this better. If I take a simple one - usePost('posts', postId) - every component that wants to display the posts details must be aware of it's id. Otherwise, how can it display it?

You can use any method of sharing client state (prop drilling, context, a library) to make the arguments available to all consumers.