Cannot read properties of undefined (reading 'merge')" Error when Querying with RTK Query

Question

I'm encountering an issue while using Redux Toolkit Query (RTK Query) in my React project. When I attempt to query an endpoint, I receive the following error:

Cannot read properties of undefined (reading 'merge') TypeError: Cannot read properties of undefined (reading 'merge')
    at http://localhost:3000/static/js/bundle.js:4722:58
    at updateQuerySubstateIfExists (http://localhost:3000/static/js/bundle.js:4650:5)
    at http://localhost:3000/static/js/bundle.js:4719:9
    at http://localhost:3000/static/js/bundle.js:6933:20
    at produce (http://localhost:3000/static/js/bundle.js:166486:17)
    at http://localhost:3000/static/js/bundle.js:6932:67
    at Array.reduce (<anonymous>)
    at reducer (http://localhost:3000/static/js/bundle.js:6913:25)
    at reducer (http://localhost:3000/static/js/bundle.js:7014:14)
    at combination (http://localhost:3000/static/js/bundle.js:159738:29)

I'm expecting to get access to the data from the response. The data is showing in network tab in the response field of that endpoint but unable to access it in console .

Here is my API endpoint setup using RTK Query:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const token = localStorage.getItem('jwtToken');
export const brokerApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.REACT_APP_APP_URL,
    prepareHeaders: (headers, { getState }) => {
      headers.set('Authorization', `JWT ${token}`);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    brokerAuthentication: builder.mutation({
      query: (id) => ({
        url: `/broker/auth`,
        method: 'POST',
        body: { key: id },
      }),
    }),
    brokerTransactions: builder.query({
      query: (brokerAddress) => ({
        url: `/broker-transactions?brokerAddress=${brokerAddress}`,
      }),
    }),
  }),
});

export const { useBrokerAuthenticationMutation, useBrokerTransactionsQuery } = brokerApi;

I have a Redux store set up as follows:

import { configureStore } from '@reduxjs/toolkit';
import uiStateReducer from './uiState';
import { brokerApi } from '../query-services/brokerApi';
import { upiProviderApi } from '../query-services/upiProviderApi';

export default configureStore({
  reducer: {
    uiState: uiStateReducer,
    [brokerApi.reducerPath]: brokerApi.reducer,
    [upiProviderApi.reducerPath]: upiProviderApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      brokerApi.middleware,
      upiProviderApi.middleware
    ),
});

And finally, I'm querying the brokerTransactions endpoint in a component as follows:

// Component code omitted for brevity
import { useBrokerTransactionsQuery } from '../query-services/brokerApi';

function Transactions() {
  const brokerAddress = useSelector(
    (state) => state.uiState.userState.brokerAddress
  );

  const { data, error, isLoading } = useBrokerTransactionsQuery(brokerAddress);
console.log(data)//showing undefined 
  // Rest of the component
}
// Component code omitted for brevity

Does anyone have any idea why I might be encountering this error and how to resolve it?

Answer 1

Based on your code I believe the reducerPath should be defined when calling createApi more that once in an application. A possibility is you could be using more than one createApi in your project defaulting the endpoint to 'api', the reason why the error is being returned is it could not identify the endpoint.

Code Reference below from the Redux Toolkit Documentation:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'

const apiOne = createApi({
  reducerPath: 'apiOne',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    // ...endpoints
  }),
})

const apiTwo = createApi({
  reducerPath: 'apiTwo',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    // ...endpoints
  }),
})

Here are some helpful resources on the Redux Tookit Query createApi