Redux Tool Kit Query: Need same data in different two components but without duplicate requests

Question

I'm new to rtk and rtk query , I'm using rtk query. I have two components I need the same data for each, 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 ?

Answer 1

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 :)

Answer 2

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

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