EntityAdapter selector issues

[MPiland]

Let me start by saying I'm learning how to use all this and playing with different ways of getting the data. I am trying to call a selector from my entityAdapter by writing

const items = useSelector(SelectAllItems)

And in the console I see the error "error: No data found at state.api. Did you forget to add the reducer to the store?" immediately proceeded by another console error of "Uncaught TypeError: Cannot read properties of undefined (reading 'ids')". I'm not sure why, though? I feel like I have it all set up correctly, but I'm probably missing something.

Here's my itemApiSlice

import { createEntityAdapter, createSelector } from '@reduxjs/toolkit'
import { apiSlice } from '../../app/api/apiSlice'

export const itemsAdapter = createEntityAdapter({})

export const initialState = itemsAdapter.getInitialState()

export const itemsApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getItems: builder.query({
      query: () => ({
        url: '/item',
        method: 'GET',
        validateStatus: (response, result) => {
          return response.status === 200 && !result.isError
        },
      }),
      async onQueryStarted(arg, { queryFulfilled }) {
        try {
          await queryFulfilled
        } catch (err) {
          console.log(err)
        }
      },
      transformResponse: (responseData) => {
        const loadedItems = responseData.map((item) => {
          item.id = item._id
          return item
        })
        return itemsAdapter.setAll(initialState, loadedItems)
      },
      providesTags: (result, error, id) => {
        if (result?.ids) {
          return [
            { type: 'Item', id: 'LIST' },
            ...result.ids.map((id) => ({ type: 'Item', id })),
          ]
        } else return [{ type: 'Item', id: 'LIST' }]
      },
    }),
    addNewItem: builder.mutation({
      query: (data) => ({
        url: '/item',
        method: 'POST',
        body: { ...data },
      }),
      invalidatesTags: (result, error, arg) => [{ type: 'Item', id: 'LIST' }],
    }),
    updateItem: builder.mutation({
      query: (data) => ({
        url: `/item`,
        method: 'PATCH',
        body: { ...data },
      }),
      invalidatesTags: (result, error, arg) => [{ type: 'Item', id: arg._id }],
    }),
    deleteItem: builder.mutation({
      query: ({ id }) => ({
        url: `/item`,
        method: 'DELETE',
        body: { id },
      }),
      invalidatesTags: (result, error, arg) => [{ type: 'Item', id: arg.id }],
    }),
  }),
})

export const {
  useGetItemsQuery,
  useAddNewItemMutation,
  useUpdateItemMutation,
  useDeleteItemMutation,
} = itemsApiSlice

export const selectItemsResult = itemsApiSlice.endpoints.getItems.select()

export const selectItemsData = createSelector(selectItemsResult, (items) => {
  return items.data
})

export const {
  selectAll: selectAllItems,
  selectById: selectItemById,
  selectIds: selectItemIds,
} = itemsAdapter.getSelectors((state) => selectItemsData(state.items))

and here's my store

import { configureStore } from '@reduxjs/toolkit'
import { apiSlice } from './api/apiSlice'
import { setupListeners } from '@reduxjs/toolkit/query'
import itemsReducer from '../features/items/itemsSlice'

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    auth: authReducer,
    items: itemsReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: process.env.NODE_ENV === 'production' ? false : true,
})

setupListeners(store.dispatch)

I'm willing to bet I'm overlooking something everyone sees as obvious, I just can't figure out what it is. I don't see to have an item getting the data like this

  const { items, isLoading, isFetching } = useGetItemsQuery('itemsList', {
    selectFromResult: ({ data }) => ({
      items: data && Object.values(data.entities),
    }),
  })

So I know the data is there somewhere, I just can't figure out why the selector isn't working.

[markerikson]

I think the immediate issue is this line:

export const selectItemsResult = itemsApiSlice.endpoints.getItems.select()

someApi.endpoints.someEndpoint.select() works the same way as the query hooks or the thunks. It needs the actual "query arg" value passed in, so that the internals know how to look up the right cache entry.

In other words, if I want to make a selector that returns the cache entry for Pikachu in a Pokemon API, I'd need to do const selectPikachuEntry = pokemonApi.endpoints.getPokemon.select("pikachu").

If you don't pass in a query arg, that's the same as .select(undefined)... which also corresponds to useThatQuery() (no argument).

In your case, you are creating a selector with a query arg of undefined, but your hook is being used to look for a query arg of 'itemsList'. I'm guessing all of your real cache entries have a query arg that's a string, and there isn't a cache entry with a query arg of undefined.

So, the selector is trying to look up a cache entry that doesn't exist, that returns undefined which then gets passed to the entity selector, and that throws an error.

Generally, you shouldn't call useSelector to retrieve values that are stored in RTK Query. Technically, you can. It's just data in the Redux store. But it's preferable to use the query hooks to do that and not worry about the details.

That said, there's a couple complications.

You have normalized the data stored in that cache entry, but you want to read the values out as an array. Again, totally doable, but you need to be careful how it's done.

The useQuery hook's selectFromResult option is the right approach. "Here's the cache entry, read from it or transform the data and return it". But, it needs to be a consistent reference returned from selectFromResult to avoid unnecessary re-renders. Memoized selectors will help with this, but in turn there's some trickiness to creating those selectors because of how Reselect works (default cache size of 1 per selector). I actually showed an example of this in the Redux tutorials:

• https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#selecting-values-from-results

So, the best answer here is probably something like:

function MyComponent() {
  // maybe a prop, or state, or whatever
  const getItemsQueryArg = 'itemsList'; 
  const entitySelectors = useMemo(() => {
    // make a unique copy of the selectors for this component
    return entityAdapter.getSelectors();
  }, [getItemsQueryArg ]);

  const { items, isLoading, isFetching } = useGetItemsQuery('itemsList', {
    selectFromResult: ({ data }) => ({
      items: data && entitySelectors.selectAll(data)
    }),
  })
}

[markerikson]

The first question is whether your API endpoint for getItems could have multiple different cache entries based on different arguments, or just one. If there's only one, then you probably don't need to pass in an argument at all. (In other words, useGetPokemonQuery("pikachu") and useGetPokemonQuery("bulbasaur") would return different results, but just useGetUsersQuery() because there's only one list of users to fetch).

If there's only one entry, then you don't have the memoization cache size problem, and you also don't need to create a unique selector instance per component.

[MPiland]

Right now I can't foresee a need to have multiple cache entries at all. I tried using this method, which I thought should work. I really appreciate all the help and patience.

const { items, isLoading, isFetching } = useGetItemsQuery('itemsList', {
    selectFromResult: ({ data }) => ({
      items: data && selectAllItems(data),
    }),
  })

Updated my .select() to include the 'itemsList' arg and I get this error "Cannot read properties of undefined (reading 'api')". Here's what my tree looks like expanded in the dev tools

[markerikson]

Unfortunately I don't have any idea what else might be going on here off the top of my head.

Could you try recording a Replay ( https://replay.io/record-bugs ) and share that here? That would make it a lot easier for me to see what's actually happening on your machine.

[EskiMojo14]

don't pass a selector to getSelectors and call that resulting selector in selectFromResult.

If you're calling it from selectFromResult, you need a selector that expects to only receive the entity state - i.e. call getSelectors() with no arguments.

[MPiland]

Ok, so using those selectors does essentially what I was already trying to achieve. Wow. I can't believe I wasn't putting that together, but that completely fixed my issue. So, now I can use that selector to build a custom selector in my slice to filter farther down as needed. Thank you!

[markerikson]

welp I was blind :)

Glad that got sorted out!