RTK-Q: Share query data between components

[nichita-pasecinic]

Hello 👋 and thank you for this amazing library, it is really very powerful.

I have a simple use case for managing the data from a query that I just did not found any hints on other platforms, so I hope that someone will help me here 😄

// -api-slice.js
// endpoint definition
fetchTransactionsByFilters: build.query({
  query: (filters) => ({
    url: '/transaction',
    method: 'POST',
    body: filters,
  }),
  providesTags: ['Transactions']
}),

It is a query that does a POST with some filters arguments.
I have 2 components that subscribes to this query via useFetchTransactionsByFiltersQuery(stateFilters), and afterwards I have a single generic component (HugeList.jsx) that displays data from this hook data.

Question: How to specify in the generic component (HugeList.jsx) to get the data from a specific cache query for a single endpoint (fetchTransactionsByFilters) ?

P.S. Don't really want to pass the data as props to HugeList.jsx as I already have it in my cache, nor passing the filters as props.

Is there any pattern or suggested method how different data from same query endpoint can be shared and identified in a component ? In documentation I believe is specified that the queryCacheKey is made from the arguments to the query itself, so should I only keep the reference to the arguments ? or mb there is a similar option like fixedCacheKey but just for a query ?

Thanks in advance

[phryneas]

You would need to keep the args globally somewhere and call the hook in both components with the same first argument.

[nichita-pasecinic]

Hi @phryneas and thanks for your reply,
I really hoped there is other option then saving the args inside the store 😄