RTK query hook, entities as array

[MPiland]

I'm fairly new to RTK Query and constantly learning how to use it and be more efficient. I have an apiSlice that normalizes the data. When I use the query hook in my component and console log the data, I can see that it's normalized. Is there a way in the hook to only return the entities as an array? I know there's the selectFromResult function that can get a single item by using an id to find the right item, but in this case I need the all of the entities as an array so I can map over them. So far I've got it down to

  const { data, isLoading } = useGetItemsQuery('itemsList', {
    waitFor: 'getItems',
  })

  const items = useMemo(() => {
    if (data) {
      return Object.values(data.entities)
    }
    return []
  }, [data])

But this seems less efficient as compared to

const items = useSelector(selectAllItems)

Here's my apiSlice

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

const itemsAdapter = createEntityAdapter({})

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,
  (itemsResult) => {
    return itemsResult.data
  }
)

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

I'm not sure it matters, but I do have a Prefetch wrapper that tries to prefetch the data

const Prefetch = () => {
  useEffect(() => {
    store.dispatch(
      itemsApiSlice.util.prefetch('getItems', 'itemsList', { Force: true })
    )
  }, [])

  return <Outlet />
}
export default Prefetch

I'll expand this out to more apiSlices once I understand fully what I'm doing here. Is there any reason to use the query hook to get all items vs just using the selector? I'm I missing something here? I've read the documents as best as I can...they sometimes go over my head. But I know I'm on the right path, just not sure what's the best way forward.

[markerikson]

Out of curiosity, what's the actual need to normalize the entities in that endpoint? You can certainly do it (and I even showed how in the "Essentials" tutorial) - just wondering what the use case is here.

Beyond that, yeah, selectFromResult would be the right answer to convert the normalized entities back into an array at the hook level.

[MPiland]

This is where I'm going to show how little I know, but I don't know if I have a need or not, yet. I'm very much learning as I go and It was really more that I saw it on a tutorial and in the essentials tutorial and just kind of stuck with it. It would almost be easier if it wasn't normalized, honestly. I thought that normalization would help to speed things up on the frontend. This is a very interactive type of application, but the initial load of data will mostly be static and used to help build the rest of the user created content.

If I were to keep it normalized, would I convert the entities at the hook level rather than pulling it out of the hook and then creating the array?

[MPiland]

Also, I think I just had a lightbulb moment. I was struggling hardcore with all of the state stuff at the bottom of my apislice and how to create custom selectors until I realized I just need to move it to my actual slice (in this case itemSlice) and set the initial state to just call the entityadapter from the api slice. Then I know it's being set into the right slice of store state and I can call that and do all my selectors on that. Now I just need to determine if I really need normalization. It does help, though, when finding that one item in a list of hundreds and thousands very quickly.

[MPiland]

I guess my question still remains, though, how do I do that conversion at the hook level? I'm still struggling a bit with that part.

[EskiMojo14]

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

[MPiland]

So I tried that and when console logging items, it's undefined. But using the way I posted above displays it just fine.

[EskiMojo14]

it will be undefined until fetched, yes

[MPiland]

I ended up having to write it as such because for whatever reason, I was getting an error of "Cannot read properties of undefined (reading 'api')" and I'm not sure how to start tracking that down, yet.

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

But otherwise, this worked perfectly, thank you! Now to keep learning!