undefined is not an object (evaluating '_api...injectEndpoints')

[imjamescrain]

Hey guys, I hate asking another "undefined is not an object" question related to RTK, but I'm stuck. The error I'm getting is: undefined is not an object (evaluating '_api.gravyApi.injectEndpoints'). I've tried looking for all circular dependencies, but I'm not seeing any. Any help would be greatly appreciated! Thx in advance.

For context, this was a legacy Redux project that we have started integrating RTK into. Libs are:

"react": "18.1.0"
"react-native": "0.70.1" (not using Fabric)
"@reduxjs/toolkit": "^1.8.5"
"react-redux": "^8.0.4"
"typescript": "^4.8.4"

Details

I have a userSlice file that is importing the userApi so that I can add a builder.addMatcher in the extraReducers that listens for userApi.endpoints.getUser.matchFulfilled.

If I remove this extraReducer related code, I don't have any issues, but if I leave it, I get the error (see HERE in code below).

In fact, the same is true if I try to add a matcher for any of my api's other than the main api. Oddly enough, if I were to do something like gravyApi.endpoints.getApplicationSettings.matchFulfilled it would work.

userApi

import {User} from '../../types';
import {getTimeZone} from 'react-native-localize';
import {gravyApi, getValidationStatus} from './api';

type UpdateUserArgs = {
  user: Partial<User>;
  token: string;
};

export const userApi = gravyApi.injectEndpoints({
  endpoints: builder => ({
    getUser: builder.query({
      query: id => ({
        url: `/users/${id}`,
        validateStatus: getValidationStatus,
      }),
      providesTags: ['User'],
    }),
    updateUser: builder.mutation<User, UpdateUserArgs>({
      query: ({user, token}) => {
        const zone = getTimeZone();
        return {
          url: `/users/${user.id}`,
          method: 'PUT',
          body: {
            user: {
              ...user,
              time_zone: zone,
            },
          },
          validateStatus: getValidationStatus,
        };
      },
      invalidatesTags: ['User'],
    }),
  }),
});

export const {useGetUserQuery, useLazyGetUserQuery, useUpdateUserMutation} =
  userApi;

userSlice

import {User} from '../../types';
import {userApi} from '../apis/userApi';
import {createSlice, PayloadAction} from '@reduxjs/toolkit';

type SliceState = User | null;

const initialState: SliceState = null;

const slice = createSlice({
  name: 'user',
  initialState: initialState,
  reducers: {
    signOut: () => initialState,
    setUser(state, action) {
      let val = null;
      if (action.payload) {
        val = {...action.payload};
        ...
      }
      return val;
    },
    setPremiumUser: (state: SliceState, action: PayloadAction<boolean>) => {
      if (state) {
        state.premium_user = action.payload;
      }
    },
    removeReferringLoanOfficer: (state: SliceState) => {
      if (state) {
        state.referring_loan_officer = null;
      }
    },
  },
  // HERE ...
  // Uncommeting breaks the build
  // extraReducers: builder => {
  //   builder.addMatcher(
  //     userApi.endpoints.getUser.matchFulfilled,
  //     (state, action) => {
  //       return action.payload as any;
  //     },
  //   );
  // },
});

export const {setPremiumUser, removeReferringLoanOfficer, setUser} =
  slice.actions;
export default slice.reducer;

api

And for context, in case it helps.

import {RootState} from '../store';
import {Platform} from 'react-native';
import Config from 'react-native-config';
import {logOutUser} from '../actions/userActions';
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
import {nativeApplicationVersion, nativeBuildVersion} from 'expo-application';

//#region Types

type ApplicationSettings = {
  message?: string;
  ios_minimum_build?: string;
  android_minimum_build?: string;
  savings_interest_rate?: string;
};

type BaseQueryType = ReturnType<typeof fetchBaseQuery>;

//#endregion

//#region Helpers

const getBaseQuery = (): BaseQueryType => {
  return fetchBaseQuery({
    baseUrl: Config.API,
    prepareHeaders: (headers, {getState}) => {
      const token = (getState() as RootState).userToken;
      if (token) {
        headers.set('Authorization', `Bearer ${token}`);
      }
      headers.set('Accept', 'application/json');
      headers.set('Content-Type', 'application/json');
      ...
      return headers;
    },
  });
};

export const getValidationStatus = (
  response: Response,
  result: any,
): boolean => {
  const status = response.status;
  if (!result?.isError) {
    if (status === 200 || status === 201 || status === 204) {
      return true;
    }
  }
  return false;
};

const baseQueryWithReauth: (baseQuery: BaseQueryType) => BaseQueryType =
  baseQuery => async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions);
    if (result.error && result.error.originalStatus === 401) {
      api.dispatch(logOutUser());
    }
    return result;
  };

//#endregion

//#region Core Apis

export const gravyApi = createApi({
  reducerPath: 'gravyApi',
  tagTypes: ['ApplicationSettings', 'DirectDeposit', 'Courses', 'User'],
  baseQuery: baseQueryWithReauth(getBaseQuery()),
  endpoints: builder => ({
    postNewSession: builder.mutation({
      async queryFn(args, queryApi, extraOptions, baseQuery) {
        try {
          const result = await baseQuery({
            url: '/sessions',
            method: 'POST',
            body: {
              user: {
                mobile_phone_number: args.phone,
                password: args.password,
              },
            },
          });
          if (result) {
            let mfaAvailable = false;
            const status = result.meta?.response?.status;
            switch (status) {
              ...
            }
          }
          throw new Error('Something went wrong.');
        } catch (e: any) {
          return {error: e.message};
        }
      },
    }),
    getApplicationSettings: builder.query<ApplicationSettings, void>({
      query: () => ({
        url: '/application_settings',
        providesTags: ['ApplicationSettings'],
        validateStatus: getValidationStatus,
      }),
    }),
  }),
});

//#endregion

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const {useGetApplicationSettingsQuery, usePostNewSessionMutation} =
  gravyApi;

[dmithryst]

Yeah I have just the same issue. Adding extraReducers leads to undefined is not an object

export const userSlice = createSlice({
  name: SLICE_NAME,
  initialState,
  reducers: {
    setUser(state, action) {
      state.user = action.payload;
    },
    clearUser(state) {
      state.user = DEFAULT_USER_DATA;
      state.token = null;
    },
    setToken(state, action) {
      state.token = action.payload;
    },
    setUserIsLoading(state, action) {
      state.userIsLoading = action.payload;
    },
  },

  // For changing user settings wont work now wont work
  // Just the same case https://github.com/reduxjs/redux-toolkit/issues/2817
  // TODO: fix later
  // extraReducers: (builder) => {
  //   builder.addMatcher(getUserInfoEndpoint.matchFulfilled, (state, action) => {
  //     state.user = action.payload;
  //   });
  // },
});

const userService = initialApiService.injectEndpoints({
  endpoints: (builder) => ({
    getUserInfo: builder.query<UserType, void>({
      query: () => `user/info`,
      providesTags: ['Put'],
    }),
  }),
});

export const getUserInfoEndpoint = userService.endpoints.getUserInfo;

const initialApiService = createApi({
  reducerPath: API_NAME,
  baseQuery: BASE_QUERY_WITH_AUTH,
  tagTypes: [...Object.values(TAGS)],
  endpoints: () => ({}),
});

[phryneas]

@dmithryst I would assume you have a cyclic import somewhere in your application. You probably access something depening on your slice in your api definition and at the same time your slice now depends on your api. You will have to find that import cycle.

[imjamescrain]

After doing some digging, I was able to see what import was causing the issue, but it isn't one that is being imported circularly on my end - at least not that I can see.

The problem appears to be that my api.ts dispatches an action (logOutUser see below) in my baseQuery that is imported from my userActions.js file. If I comment this out, it all works.

However, my userSlice.ts doesn't import api.ts or userActions.js, so I don't understand how this creates a circular dependency? You can see the imports in my initial question above.

Of note, the action calls a bunch of other actions. Example ...

import {actionA} from "fileA.js";
import {actionB} from "fileB.js";
import {actionC} from "fileC.js";
export function logOutUser() {
  return function (dispatch, getState) {
    crashlytics().setUserId('');   
    dispatch(actionA());
    dispatch(actionB());
    dispatch(actionC());
    ...
  };
}

If comment them all out, it all works ...

// THIS WORKS?!
//import {actionA} from "fileA.js";
//import {actionB} from "fileB.js";
//import {actionC} from "fileC.js";
export function logOutUser() {
  return function (dispatch, getState) {
    crashlytics().setUserId('');   
    //dispatch(actionA());
    //dispatch(actionB());
    //dispatch(actionC());
    ...
  };
}

On the surface, I really can't see why this would cause an issue, since no direct circular dependencies are in play. Although, it's possible I'm missing something.

For now I'm going to look at refactoring, or possibly just moving off of Redux. There seems to be a lot of boilerplate here to get things moving that might be too heavy a lift for this legacy project.

@dmithryst you might trying commenting out files another layer deep, or looking in your BASE_QUERY_WITH_AUTH to see if you can comment out anything in there to isolate.

Best of luck ...

[markerikson]

@imcrainjames fwiw there's several tools out there that can report on circular dependencies. If you happen to be building the app using Webpack, there's https://github.com/aackerman/circular-dependency-plugin . I've got an example of setting that up in my own day job at next.config.js.

Other tools that may be helpful are https://github.com/pahen/madge , https://github.com/sverweij/dependency-cruiser , or some ESLint rules.

My guess is that it's a larger multi-file "circle" - probably something involving the store setup files.

[imjamescrain]

Great tip @markerikson, thanks so much! Going to go ahead and close this issue. Thanks again.

[bryanprimus]

for me the circular dependency is obvious

My file structure and import are like this

// mainApi.ts

import { notificationTagTypes } from './notificationApi';

export const mainApi = createApi({
  reducerPath,
  tagTypes: [...notificationTagTypes, /* tagTypesForOtherFeatures */],
  baseQuery,
  endpoints: () => ({}),
});

// notificationApi.ts

import { mainApi } from './mainApi';

export const notificationTagTypes = ['Notifications'] as const;

export const notificationApi = mainApi.injectEndpoints({
  endpoints: (builder) => ({
    getNotifications: builder.query<GetNotifications, { notificationType: NotificationType }>({
      query: ({ notificationType }) => ({
        url: 'notifications/lists',
        method: 'GET',
        params: {
          isRead: notificationType === 'all' ? undefined : notificationType === 'read',
        },
      }),
      providesTags: ['Notifications'],
      transformResponse: (response: ApiResponse<GetNotifications>) => response.data,
    }),
  }),
});

any idea on where is a better place to put notificationTagTypes? I still want it to be colocated within its API

[phryneas]

If your bundler cannot deal with this, you won't get around putting them into an extra file - or injecting them using enhanceEndpoints, instead of declaring them on your main api.