Search code examples
reactjsredux-toolkitrtk-query

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?


Solution

  • 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