CODEWITHSUNDEEP
reduxredux-toolkitrtk-query
DannyMoshe
DannyMoshe

Reputation: 6255

How to call endpoint.select() in RTK query with an argument to retrieve cached data (within another selector)?

I have an endpoint which accepts a parameter and I'm trying to access the cached data using endpoint.select() in a redux slice. The problem is i cant figure out how to pass in the cache key. I've done the following:

export const selectProductsResult = (storeId) =>
   storeApi.endpoints.listProductsByStore.select(storeId);

This works fine if I use it within a component like this:

const currentStoreProducts = useSelector(selectProductResult(currentStoreId))

What I don't understand is how I can use this in another selector, for example this does not work:

 const selectCurrentProducts = createSelector((selectCurrentStoreId), currentStoreId 
     => selectProductResult(currentStoreId)

If I try to use this in a component like so:

const currentProducts = useSelector(selectCurrentProducts)

The value obtained is a memoized function. I've played around quite a bit and can't seem to build the desired selector.

Upvotes: 4

Views: 6054

Answers (1)

markerikson
markerikson

Reputation: 67469

The call to someEndpoint.select() generates a new selector function that is specialized to look up the data for that cache key. Loosely put, imagine it looks like this:

const createEndpointSelector = (cacheKey) => {
  return selectorForCacheKey = () => {
    return state.api.queries['someEndpointName'][cacheKey];
  }
}

const selectDataForPikachu = createEndpointSelector('pikachu');

So, you need to call someEndpoint.select() with the actual cache key itself, and it returns a new selector that knows how to retrieve the data for that cache key:

const selectDataForPikachu = apiSlice.endpoints.getPokemon.select('pikachu');

// later, in a component
const pikachuData = useSelector(selectDataForPikachu);

Upvotes: 3

Related Questions