Passing placeholderData with a graphql query
Im using React Query in a React Native application, which uses React Navigation for its navigation. If you're not familiar with that, the part thats worth noting is how the routes/screens are recommended to have just a single id/PK/identifier to each screen in the params. Eg go to the products screen with the params {id: 123}. And then on the products screen you fetch a product by the id/123 in the params. This is mainly due to deep linking to the app, since the links can contain
/products/:id and not en entire product object. I had previously had the screens working by passing the same graphql Fragments within navigation, but with the deep linking concern I need to add support for the id in the params.
Where React Query comes in is that the screen may fetch other data from graphql beyond just the product, so Im curious if passing in just the product fragment to placeholderData from a previous screen would hydrate just the product query UI on the screen, or how thats handled? Furthermore, if I pass in just the id in the params, will React Query use the same product from cache with the same id on the previous screen to hydrate the product UI? It seems that when I pass in just the id, the component makes a request, but when fetching in the entire product object, it doesnt. Anyway, wanted to see if anyone had any advice for hows theyve passed data between screens in React Native/React Navigation and used React Query for data fetching.
Appreciate anyone's help on this, sorry for the mouth full.1 Reply
optimistic-gold•3y ago
Hi 👋
If the query key is the same, and you're leveraging caching, then the query on the product page will return the data from the cache.
In terms of how to "hydrate" on the product page, you can use the same query key from the products page and read the query data that way. You might want to use the
select option to select a slice of the data (the specific product you're viewing by ID).
You could also use initialData for another query as you're describing, but I don't think I'd derive that from something already in the cache.
Hopefully this helps 🙂