2022-05-16

How do you access query arguments in getSelectors() when using createEntityAdapter with RTK Query

I've been following along the REDUX essentials guide and I'm at part 8, combining RTK Query with the createEntityAdapter. I'm using the guide to implement it in a personal project where my getUni endpoint has an argument named country, as you can see from the code snippet below.

I'm wondering is there anyway to access the country argument value from the state in universityAdaptor.getSelector(state => ) at the bottom of the snippet, as the query key name keeps changing.

import {
  createEntityAdapter,
  createSelector,
  nanoid
} from "@reduxjs/toolkit";
import {
  apiSlice
} from "../api/apiSlice";


const universityAdapter = createEntityAdapter({})

const initialState = universityAdapter.getInitialState();

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUni: builder.query({
      query: country => ({
        url: `http://universities.hipolabs.com/search?country=${country}`,
      }),
      transformResponse: responseData => {
        let resConvert = responseData.slice()
          .sort((a, b) => a.name.localeCompare(b.name))
          .map(each => {
            return { ...each,
              id: nanoid()
            }
          });

        return universityAdapter.setAll(initialState, resConvert)
      }
    })
  })
});

export const {
  useGetUniQuery
} = extendedApiSlice;


export const {
  selectAll: getAllUniversity
} = universityAdapter.getSelectors(state => {
  return Object.keys({ ...state.api.queries[<DYNAMIC_QUERY_NAME>]data }).length === 0  
? initialState : { ...state.api.queries[<DYNAMIC_QUERY_NAME>]data }
})

UPDATE: I got it working with a turnery operator due to the multiple redux Actions created when RTK Query handles fetching. Wondering if this is best practice as I still haven't figured out how to access the country argument.

export const { selectAll: getAllUniversity } = universityAdapter
  .getSelectors(state => {

  return !Object.values(state.api.queries)[0]
    ? initialState : Object.values(state.api.queries)[0].status !== 'fulfilled'
      ? initialState : Object.values(state.api.queries)[0].data
})


No comments:

Post a Comment