Is it possible to share cache between one element of a batched query and that same element as a singular query?

[mitchellkager]

My app's primary screen is a feed which displays most of my Objects' data in a condensed format. This feed is populated via a batched GraphQL request.

Interacting with an Object in the feed navigates to a detailed view which reuses the same Object. Right now, I am passing this Object as a prop to the subscreen; however, I have read that is poor practice and I should just pass an identifier to be resolved within my app's state: for example, I have at least one use case wherein I want to pass only the identifier to the component s.t. the component itself will fetch the Object data.

Is it possible to use query's caching mechanism as my state management? Obviously I could issue one batch request to populate my feed, then a subsequent request for each Object interacted with. But, if I need to issue a redundant request (due to cache miss between batch and singular) then I believe I require a state management library instead of query.

[Birkbjo]

Yes, kind of. You can put your useQuery in your own custom hook and reuse it in your component. You can then use the select-function, where you can map/filter over the result and match just the "ID" of the object you want. See more here https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option . I really encourage you to read through most of the post in that series - especially nr 8.

Just a heads up - if you re-use this in a lot of components, you might get some really bad performance issues if/when you update the data. I had to "copy" my data into a zustand-store due to the poor performance of the select-function (even if it was memoized), the computation to check for difference caused noticeable freezes. I didn't investigate that too much though, since our zustand-solution worked for us.