Search code examples
javascriptreactjsnext.jsredux-toolkitrtk-query

how can I access my store from RTK-Query endpoints?


I want to access to my redux-toolkit store data inside of the rtk-query endpoints.

how can I access my store from query or transformResponse methods?

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'
import { setUserInfo, setUserPermissions } from '../features/userSlice.js'
import { aesDEC } from 'src/util/public.util.js'

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase,
  endpoints: builder => ({
    getUser: builder.mutation({
      query: () => ({
        url: '/Account/Login/GetUserInfo',
        method: 'POST',
        body: {
          RequestVerificationToken: salt //here I want the salt from my redux store
        }
      }),
      transformResponse: response => {
        return aesDEC(response.data, salt); //here I want the salt from my redux store
      },
    }),
})
export const { useGetUserMutation } = authApi

Solution

  • Neither query nor transformResponse have direct access to the Redux state, however, you can replace both with the queryFn which does. With queryFn the query function used is passed the query arg, the base query api object, any defined extraOptions, and the baseQuery function. Use api.getState to access the current state value.

    Example, your code might look similar to the following:

    export const authApi = createApi({
      reducerPath: 'authApi',
      baseQuery: customFetchBase,
      endpoints: builder => ({
        getUser: builder.mutation({
          queryFn: async (arg, api, extraOptions, baseQuery) => {
            const state = api.getState();
            const salt = state./* path to salt state value */;
    
            try {
              const { data } = await = baseQuery({
                url: '/Account/Login/GetUserInfo',
                method: 'POST',
                body: {
                  RequestVerificationToken: salt
                }
              });
              return { data: aesDEC(data, salt) };
            } catch(error) {
              return { error };
            }
          },
        }),
      })
    });