CODEWITHSUNDEEP
reactjsredux-toolkitrtk-query
hussein alaa
hussein alaa

Reputation: 41

Need same data in different two components but without duplicate requests

I'm using Redux-Toolkit (RTK) Query. I have two components and need the same data for each, and I do not want to call the function twice in each component to get the same data. Is there a way to only call it one time then for better performance?

For example I'm calling getCartItems in one of those components but I need the same data in the nav bar component to get its count so I don't want to send the same request again am I right?

Upvotes: 3

Views: 1827

Answers (2)

Yilmaz
Yilmaz

Reputation: 49182

When you query data, redux toolkit query will store those queries inside queries of slice in the redux store:

enter image description here

this is stored in the global state, so anytime you make a request to an endpoint, rtk query first checks this property and if there is same query, it does not add a new query, it de-duplicates (eliminates duplicate) and returns the result of the original query

Upvotes: 5

phry
phry

Reputation: 44078

If you call the same query hook with the same argument in multiple components, only one request will be made. Cache entries are shared internally, that's pretty much the point of RTK Query.

Try it out & take a look at your network devtools :)

Upvotes: 4

Related Questions