CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-toolkit
Kirill
Kirill

Reputation: 21

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
})

Upvotes: 1

Views: 1952

Answers (4)

Kirill
Kirill

Reputation: 21

The intention of the getUni endpoint was to produce an array of university data. To implement the .getSelector function to retrieve that array, I looped over all query values, searching for a getUni query and ensuring they were fulfilled. The bottom turnery operator confirms the getUni endpoint was fired at least once otherwise, it returns the initialState value.

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

    for (const value of Object.values(state.api.queries)) {
      if (value?.endpointName === 'getUni' && value?.status === 'fulfilled') {
        newObj = value.data;
      }
    }

    return !Object.values(newObj)[0] ? initialState : newObj;
  })

Upvotes: 0

kks1
kks1

Reputation: 171

select returns a memoized curry function. Thus, call it with first with corresponding arg aka tribeId in your case and then with state. This will give you the result object back for corresponding chained selectors.

export const getListsResult = (state: RootState) => {
  return state.tribeId ? extendedApi.endpoints.getLists.select(state.tribeId)(state) : [];
};

Upvotes: 0

Boris Net
Boris Net

Reputation: 1

Some more info that may help see what's happening with the code in the Essentials tutorial, background - getLists endpoint takes 1 parameter, select in the service:

export const getListsResult = (state: RootState) => {
  return state.tribeId ? extendedApi.endpoints.getLists.select(state.tribeId) : [];
};

And my selector in the slice:

export const selectAllLists = createSelector(getListsResult, (listsResult) => {
  console.log('inside of selectAllLists selector = ', listsResult);
  return listsResult.data;
  // return useSelector(listsResult) ?? [];
});

Now this console logs listsResult as ƒ memoized() { function! Not something that can have .data property as tutorial suggests. Additionally return useSelector(listsResult) - makes it work, by executing the memoized function.

This is how far I got, but from what I understand, the code in the Essentials tutorial does not work as it is...

However going here https://codesandbox.io/s/distracted-chandrasekhar-r4mcn1?file=/src/features/users/usersSlice.js and adding same console log:

const selectUsersData = createSelector(selectUsersResult, (usersResult) => {
  console.log("usersResult", usersResult);
  return usersResult.data;
});

Shows it is not returning a memorised function, but an object with data on it instead.

Wonder if the difference happening because I have a parameter on my endpoint...

Upvotes: 0

markerikson
markerikson

Reputation: 67469

I wrote that "Essentials" tutorial :)

I'm actually a bit confused what your question is - can you clarify what specifically you're trying to do?

That said, I'll try to offer some hopefully relevant info.

First, you don't need to manually call someEndpoint.select() most of the time - instead, call const { data } = useGetThingQuery("someArg"), and RTKQ will fetch and return it. You only need to call someEndpoint.select() if you're manually constructing a selector for use elsewhere.

Second, if you are manually trying to construct a selector, keep in mind that the point of someEndpoint.select() is to construct "a selector that gives you back the entire cache entry for that cache key". What you usually want from that cache entry is just the received value, which is stored as cacheEntry.data, and in this case that will contain the normalized { ids : [], entities: {} } lookup table you returned from transformResponse().

Notionally, you might be able to do something like this:

const selectNormalizedPokemonData = someApi.endpoints.getAllPokemon.select();

// These selectors expect the entity state as an arg, 
// not the entire Redux root state: 
// https://redux-toolkit.js.org/api/createEntityAdapter#selector-functions
const localizedPokemonSelectors = pokemonAdapter.getSelectors();

const selectPokemonEntryById = createSelector(
  selectNormalizedPokemonData ,
  (state, pokemonId) => pokemonId,
  (pokemonData, pokemonId) => {
    return localizedPokemonSelectors.selectById(pokemonData, pokemonId);
  }
)

Upvotes: 2

Related Questions