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

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

• javascript
• reactjs
• next.js
• redux-toolkit
• rtk-query

• 1 Replace query with a queryFn which will provide api.getState and also remove transformResponse. With queryFn you will do the work of both your query and your transformResponse – possum Commented May 28, 2023 at 9:35

2 Answers 2

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

You can also get access to the state in fetchBaseQuery/prepareHeaders function like this if you need to set Auth or some general header:

export const DataApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ 
    baseUrl: `${process.env.REACT_APP_API_URL}`, 
    prepareHeaders: (headers, {getState}) => {
      const state = getState();
      headers.set(HEADER_AUTH, state?.auth?.value?.authorization);
    }
  }),
 ...
});