How to extract selectors from adapter from queries with arguments

Question

I'm trying to extract selectors from queries in my apiSlice as said in this documentation: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced

The documentation put this example:


const usersAdapter = createEntityAdapter()

const initialState = usersAdapter.getInitialState()

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: responseData => {
        return usersAdapter.setAll(initialState, responseData)
      }
    })
  })
})

export const { useGetUsersQuery } = extendedApiSlice

// Calling `someEndpoint.select(someArg)` generates a new selector that will return
// the query result object for a query with those parameters.
// To generate a selector for a specific query argument, call `select(theQueryArg)`.
**// In this case, the users query has no params, so we don't pass anything to select()**
export const selectUsersResult = extendedApiSlice.endpoints.getUsers.select()

const selectUsersData = createSelector(
  selectUsersResult,
  usersResult => usersResult.data
)

export const { selectAll: selectAllUsers, selectById: selectUserById } =
  usersAdapter.getSelectors(state => selectUsersData(state) ?? initialState)

Now, i need to have selectById selector (that by default takes userid as second parameter). I can't manage to have a working selectById selector when my query looks like this

endpoints: builder => ({
    getUsers: builder.query({
      query: (applicationId) => `/application/${applicationId}/users`,
      transformResponse: responseData => {
        return usersAdapter.setAll(initialState, responseData)
      }
    })
  })

How do I extract selectById selector from adapter and how i use it in a component with useSelector when I have this kind of query with arguments?

Thanks anyone that will help me

Eugene Tusmenko · Answer 1 · 2022-04-24T23:20:50.700

I feel like you mismatch concepts a bit, so it leads to confusion.

First of all, let's clarify, that's selectors you a using- it's not a selector to your state in usersAdapter, but to RTK-Q's own state. By handling a response in transformResponse you are just copying the data from it to your's, usersAdapter's state.

So, considering that, you should be specific about which state you are going to select from. If you want it from the "final destination", i.e. from the adaptor's state, it's should be done via:

const usersSelectors = **usersAdapter**.getSelectors(
  (state) => state.users // or something like that
)

Otherwise, using the selectors from apiSlices like extendedApiSlice from your example - you are fetching the data from RTK-Q's cached state, which may not contain some old data after the cache invalidation. If it's still your goal, the limitation is that RTK-Q's store isn't a normalized store you may expect, with ids and values, but rather the key-value pairs, where keys are your requests, and the values - last results (users arrays in your case). So, if you have no API endpoint defined for selecting a particular user by ID, you won't be able to select it from RTK-Q's state directly. But you may select the cached users by applicationId, and find your user by id in the result array. I bet it's not what you actually want, so most probably you need just to prepare selectors for your own store, as I've mentioned above.

How to extract selectors from adapter from queries with arguments

1 Answers1