Cannot read properties of undefined (reading [api.reducerPath]) at Object.extractRehydrationInfo after clearing browser data

Question

I have used redux persist with RTK query and redux toolkit. After clearing browser data manually from browser settings, it could not rehydrate RTK query reducer and showing

Uncaught TypeError: Cannot read properties of undefined (reading 'notesApi')
    at Object.extractRehydrationInfo (notesApi.js:18:1)
    at createApi.ts:234:1
    at memoized (defaultMemoize.js:123:1)
    at createApi.ts:260:1
    at memoized (defaultMemoize.js:123:1)
    at createReducer.ts:239:1
    at Array.filter (<anonymous>)
    at reducer (createReducer.ts:236:1)
    at reducer (createSlice.ts:325:1)
    at combination (redux.js:560:1).

Here is the screenshot of my problem.

Official Documentation says

RTK Query supports rehydration via the extractRehydrationInfo option on createApi. This function is passed every dispatched action, and where it returns a value other than undefined, that value is used to rehydrate the API state for fulfilled & errored queries.

But what about undefined value like in my case?

This is my store

const reducers = combineReducers({
  userReducer,
  [notesApi.reducerPath]: notesApi.reducer,
});

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(
  persistConfig,
  reducers
);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(notesApi?.middleware),
});    

export default store;

This is the notesApi

export const notesApi = createApi({
 reducerPath: "notesApi" ,
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:5000/api/notes/",
    prepareHeaders: (headers, { getState }) => {
      const token = getState().userReducer.userInfo.token;
      console.log(token);
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
    },
  }),
  extractRehydrationInfo(action, { reducerPath }) {
    if (action.type === REHYDRATE) {
        return action.payload[reducerPath]
    }
  },
  tagTypes: ["notes"],

  endpoints: (builder) => ({
    createNote: builder.mutation({
      query: (data) => ({
        url: `/create`,
        method: "POST",
        body: data,
      }),
      invalidatesTags: ["notes"],
    }),
    getSingleNote: builder.query({
      query: (id) => ({
        url: `/${id}`,
      }),
      providesTags: ["notes"],
    })
});
export const {  useGetSingleNoteQuery,
  useCreateNoteMutation,
} = notesApi;

I'm indagating the same problem at the moment – Gabriele Alfredo Pini Jun 23 '22 at 11:25 — Gabriele Alfredo Pini, Jun 23 '22 at 11:25

Drew Reese · Answer 1 · 2022-07-14T15:48:57.110

I've run into this issue a few times and it seems to manifest when attempting to rehydrate the store when there isn't anything in localStorage to hydrate from.

The error is saying it can't read "notesApi" of undefined when running extractRehydrationInfo. "notesApi" is the API slice's reducerPath value. The action's payload is undefined.

extractRehydrationInfo(action, { reducerPath }) {
  if (action.type === REHYDRATE) {
    return action.payload[reducerPath]; // <-- action.payload undefined
  }
},

To resolve this issue I've simply used the Optional Chaining operator on the action payload.

Example:

extractRehydrationInfo(action, { reducerPath }) {
  if (action.type === REHYDRATE) {
    return action.payload?.[reducerPath];
  }
},

Cannot read properties of undefined (reading [api.reducerPath]) at Object.extractRehydrationInfo after clearing browser data

1 Answers1