Access to data fetched in different components
Hi everyone, just wondering how can i get access to the data in the following example: CategoriesSidebar component where i can use useQuery hook to fetch categories only. Produsts component will fetch products separately. And let's assume I have component X where i need to get the access to both datas (categories and products) to do some data manipulations, without RQ i would store it in redux and get it from store but i would like to achieve that only with RQ, shall i call categories and products again inside component X?
7 Replies
adverse-sapphire•4y ago
If the same data are fetched from different locations, use custom hooks relying on useQuery to fetch/get from cache
adverse-sapphire•4y ago
Did you have a look here: https://tkdodo.eu/blog/practical-react-query
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
adverse-sapphire•4y ago
Might answer (all) your questions
correct-apricotOP•4y ago
thank you @glabat i think the answer hereis to get from cache, how to do that? and what is going to happen when caching time will run out?
adverse-sapphire•4y ago
A custom hook useCategories for example, which would call useQuery under the hood. Whenever you need categories you call that hook.
If data is still fresh (staleTime) RQ would return cached data. Otherwise it would perform a request to get the categories
All of this being hidden by the custom hook
correct-apricotOP•4y ago
ok, so if we could summarize: i can create 2 custom hooks: useCategories and useProducts, and if i need both datas for component X i will use both in paralell?
adverse-sapphire•4y ago
Yep
That is the "basic" answer which should make it work.
Then as always optimisation could be done if needed