How to apply createEntityAdapter to createApi slice

Question

I have implemented successfully a redux-toolkit api. Now Im trying to use createEntityAdapter to be able to use the pre-built selector methods.

import {
  createEntityAdapter,
  createSelector,
} from '@reduxjs/toolkit'
import api from '@app/redux/reducers/api'

const environmentsAdapter = createEntityAdapter()
const initialState = environmentsAdapter.getInitialState()

export const extendedApiSlice = api.injectEndpoints({
  endpoints: (builder) => ({
    getEnvironments: builder.query({
      query: ROUTES.ENVIRONMENTS,
      // IMPORTANT
      transformResponse: (responseData: any) => {
        return environmentsAdapter.setAll(environmentsAdapter.getInitialState(), responseData)
      },
    }),
  }),
})

// Default api slice hooks
export const {
  useGetEnvironmentsQuery, // data returns the normalized data correctly
  usePostEnvironmentMutation
} = extendedApiSlice

export const selectEnvironmentsResult = extendedApiSlice.endpoints.getEnvironments.select()

const selectEnvironmentResultData = createSelector(
  selectEnvironmentsResult,
    environmentResult => {
    console.log(environmentResult) // {status: "uninitialized", isUninitialized: true, isLoading: false, isSuccess: false, isError: false}
    return environmentResult?.data ?? []
  }
)

export const {
  selectAll: selectAllEnvironments, // returns an empty array, ERROR!
} = environmentsAdapter.getSelectors(state => {
  console.log( state ) // Here the entire redux state is printed, ERROR?
  return selectEnvironmentResultData(state) ?? initialState
})

When using useGetEnvironmentsQuery hooks, I get the data correctly. But when I use selectAllEnvironments I get an empty array. Why?

score 2 · Answer 1 · answered May 13 '22 at 10:36

The problem solved changing the arguments of useGetEnvironmentsQuery. I replaced:

  const { isLoading, isFetching, error } = useGetEnvironmentsQuery({}) // WITH EMPTY OBJECT
  const data = useSelector(selectAllEnvironments)
  console.log( data ) // empty array

to:

  const { isLoading, isFetching, error } = useGetEnvironmentsQuery() // WITH NO ARGS
  const data = useSelector(selectAllEnvironments)
  console.log( data ) // data is defined here finally :)

Not sure whats going on exactly

How to apply createEntityAdapter to createApi slice

1 Answers1