using query selectors inside components

[dudi-cornix]

hey everyone,

I was wondering how do you use your rtk-query selectors when needing to access the cached data in multiple child components,
I love the idea we can use selectors to fetch the data anywhere we want, but in most cases, your query contains parameters you need to pass in order to access the cached data so it happens I need to pass the query arguments all down the component tree to be able to use with my selectors

for example:

function myComponent({args}) {

const data = useSelector(myApi.endpoints.getXXXXX.select(args));

}

so is there an elegant way to access the cached data without having to pass the arguments ?

[markerikson]

Since a call to endpoint.getSomething.select(args) creates a unique selector instance that closes over those args, one option might be creating that selector higher in the component tree and putting it in context or something.

But, ultimately the call to read the data from the store has to be done using the arguments somehow - otherwise there's no way to know which cached query result is being accessed.

[phryneas]

Adding to that, you should probably be using

const selector = useMemo(() => myApi.endpoints.getXXXXX.select(args), [args]);
const data = useSelector(selector);

to keep the selector stable.

Or just use useEndpointQueryState(args) or just useEndpointQuery(args) anywhere - the latter will not cause extra requests, but keep the value in cache even if the component originally calling useEndpointQuery(args) is unmounted.