skip to Main Content

Please Help me, This is the error

error page

I get this error in some browsers (works on safari but not in other browser) after using the app for sometimes or immediately.
this is what my console looks like when error occurs

//@ts-nocheck
"use client";

import { combineReducers, configureStore } from "@reduxjs/toolkit";

import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web

import { setupListeners } from "@reduxjs/toolkit/query";

//* FEATURES REDUCERS (step1)
import authenticatedReducer from "./Features/authenticatedSlice/authenticatedSlice";
//* RTK QUERY IMPORTS (step I)
import { authenticationApi } from "./API/authenticationApi";
import { libraryApi } from "./API/libraryApi";
import { bookFineApi } from "./API/bookFineApi";
import { librarySettingApi } from "./API/librarySettingApi";
import { contactUsApi } from "./API/contactUsApi";
import { newsLetterSubscriptionApi } from "./API/newsLetterSubscriptionApi";
import { classApi } from "./API/classApi";
import { sectionApi } from "./API/sectionApi";
import { subjectApi } from "./API/subjectApi";
import { schoolUserAuthApi } from "./API/schoolUserAuthApi";
import { schoolApi } from "./API/schoolApi";
import { hostelRoomTypeApi } from "./API/hostelRoomTypeApi";
import { hostelApi } from "./API/hostelApi";
import { hostelRoomApi } from "./API/hostelRoomApi";
import { hostelStudentApi } from "./API/hostelStudentApi";
import { hostelStudentFeesApi } from "./API/hostelStudentFeesApi";
import { streamApi } from "./API/streamApi";
import { incomeHeadApi } from "./API/incomeHeadApi";
import { incomeApi } from "./API/incomeApi";
import { expenseHeadApi } from "./API/expenseHeadApi";
import { expenseApi } from "./API/expenseApi";
import { examTermApi } from "./API/examTermApi";
import { examHallApi } from "./API/examHallApi";
import { admitCardDesignApi } from "./API/admitCardDesignApi";
import { productSupplierApi } from "./API/productSupplierApi";
import { productCategoryApi } from "./API/productCategoryApi";
import { productStoreApi } from "./API/productStoreApi";
import { productApi } from "./API/productApi";
import { galleryApi } from "./API/galleryApi";
import { batchApi } from "./API/batchApi";
import { admittedYearApi } from "./API/admittedYearApi";
import { employeeDepartmentApi } from "./API/employeeDepartmentApi";
import { employeeDesignationApi } from "./API/employeeDesignationApi";
import { canteenItemApi } from "./API/canteenItemApi";
import { canteenItemOrderApi } from "./API/canteenItemOrderApi";
import { vehicleApi } from "./API/vehicleApi";
import { vehicleRouteApi } from "./API/vehicleRouteApi";
import { studentOneTimeAttendanceApi } from "./API/studentOneTimeAttendanceApi";
import { studentPeriodicAttendanceApi } from "./API/studentPeriodicAttendanceApi";
import { idCardDesignApi } from "./API/idCardDesignApi";
import { eventCalendarApi } from "./API/eventCalendarApi";
import { noticeApi } from "./API/noticeAPI";
import { noticeCategoryAPI } from "./API/noticeCategoryAPI";
import { incidentApi } from "./API/incidentApi";
import { assignIncidentApi } from "./API/assignIncidentApi";
import { borrowedBookApi } from "./API/borrowedBookApi";
import { purposeApi } from "./API/purposeApi";
import { referenceApi } from "./API/referenceApi";
import { sourceApi } from "./API/sourceApi";
import { complaintTypeApi } from "./API/complaintTypeApi";
import { phoneCallLogApi } from "./API/phoneCallLogApi";
import { admissionEnquiryApi } from "./API/admissionEnquiryApi";
import { enquiryFollowUpApi } from "./API/enquiryFollowUpApi";
import { complainApi } from "./API/complainApi";
import { visitorBookApi } from "./API/visitorBookApi";
import { postalReceiveApi } from "./API/postalReceiveApi";
import { postalDispatchApi } from "./API/postalDispatchApi";
import { assignmentApi } from "./API/assignmentApi";
import { submissionApi } from "./API/submissionApi";
import { admissionApi } from "./API/admissionApi";
import { admissionApplicationApi } from "./API/admissionApplicationApi";

import { achievementCertificateDesignApi } from "./API/achievementCertificateDesignApi";
import { classTimeTableApi } from "./API/classTimeTableApi";

import { liveEmployeeMeetingApi } from "./API/liveEmployeeMeetingApi";
import { liveClassMeetingApi } from "./API/liveClassMeetingApi";
import { liveClassApi } from "./API/liveClassApi";

//online course
import { onlineCourseApi } from "./API/onlineCourseApi";
import { onlineCourseLessonApi } from "./API/onlineCourseLessonApi";

//schoolWebsite
import { schoolWebsiteTeamApi } from "./API/schoolWebsiteTeamApi";
import { schoolWebsiteEventApi } from "./API/schoolWebsiteEventApi";
import { schoolWebsiteHeroApi } from "./API/schoolWebsiteHeroApi";
import { schoolWebsiteHomePageSecondApi } from "./API/schoolWebsiteHomePageSecondApi";
import { schoolWebsiteNoticeApi } from "./API/schoolWebsiteNoticeApi";
import { schoolWebsiteHistoryApi } from "./API/schoolWebsiteHistoryApi";
import { schoolWebsiteProgrammeApi } from "./API/schoolWebsiteProgrammeApi";
import { schoolWebsiteContactApi } from "./API/schoolWebsiteContactApi";
import { schoolWebsiteOtherSchoolInfoApi } from "./API/schoolWebsiteOtherSchoolInfoApi";
import { schoolWebsitePartnerApi } from "./API/schoolWebsitePartnerApi";
import { schoolWebsiteValuesApi } from "./API/schoolWebsiteValuesApi";
import { schoolWebsiteScholarshipDetailsApi } from "./API/schoolWebsiteScholarshipDetailsApi";
import { schoolWebsiteEcaApi } from "./API/schoolWebsiteEcaApi";
import { schoolWebsiteFacilitiesApi } from "./API/schoolWebsiteFacilitiesApi";

// fees
import { feeGroupApi } from "./API/feeGroupApi";
import { feeDiscountApi } from "./API/feeDiscountApi";
import { feeTypeApi } from "./API/feeTypeApi";
import { feeMasterApi } from "./API/feeMasterApi";
//event
import { eventApi } from "./API/eventApi";

//admin
import { postApi } from "./API/postApi";
import { studentAchievementApi } from "./API/studentAchievementApi";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["authenticated"], // place to select which state you want to persist
};

const rootReducer: any = combineReducers({
  ////* (step2)
  // todo (reducer simple state): FEATURES REDUCERS (keep adding below)
  authenticated: authenticatedReducer,

  // * (step II)
  // todo (api query): RTK QUERY REDUCERS (keep adding below)
  [authenticationApi.reducerPath]: authenticationApi.reducer,
  [libraryApi.reducerPath]: libraryApi.reducer,
  [bookFineApi.reducerPath]: bookFineApi.reducer,
  [librarySettingApi.reducerPath]: librarySettingApi.reducer,
  [newsLetterSubscriptionApi.reducerPath]: newsLetterSubscriptionApi.reducer,
  [contactUsApi.reducerPath]: contactUsApi.reducer,
  [classApi.reducerPath]: classApi.reducer,
  [sectionApi.reducerPath]: sectionApi.reducer,
  [schoolUserAuthApi.reducerPath]: schoolUserAuthApi.reducer,
  [subjectApi.reducerPath]: subjectApi.reducer,
  [hostelRoomTypeApi.reducerPath]: hostelRoomTypeApi.reducer,
  [hostelApi.reducerPath]: hostelApi.reducer,
  [hostelRoomApi.reducerPath]: hostelRoomApi.reducer,
  [hostelStudentApi.reducerPath]: hostelStudentApi.reducer,
  [hostelStudentFeesApi.reducerPath]: hostelStudentFeesApi.reducer,
  [streamApi.reducerPath]: streamApi.reducer,
  [incomeHeadApi.reducerPath]: incomeHeadApi.reducer,
  [incomeApi.reducerPath]: incomeApi.reducer,
  [expenseHeadApi.reducerPath]: expenseHeadApi.reducer,
  [expenseApi.reducerPath]: expenseApi.reducer,
  [examTermApi.reducerPath]: examTermApi.reducer,
  [noticeApi.reducerPath]: noticeApi.reducer,
  [noticeCategoryAPI.reducerPath]: noticeCategoryAPI.reducer,
  [productSupplierApi.reducerPath]: productSupplierApi.reducer,
  [productCategoryApi.reducerPath]: productCategoryApi.reducer,
  [productStoreApi.reducerPath]: productStoreApi.reducer,
  [productApi.reducerPath]: productApi.reducer,
  [galleryApi.reducerPath]: galleryApi.reducer,
  [batchApi.reducerPath]: batchApi.reducer,
  [schoolApi.reducerPath]: schoolApi.reducer,
  [employeeDepartmentApi.reducerPath]: employeeDepartmentApi.reducer,
  [employeeDesignationApi.reducerPath]: employeeDesignationApi.reducer,
  [examHallApi.reducerPath]: examHallApi.reducer,
  [admitCardDesignApi.reducerPath]: admitCardDesignApi.reducer,
  [canteenItemApi.reducerPath]: canteenItemApi.reducer,
  [canteenItemOrderApi.reducerPath]: canteenItemOrderApi.reducer,
  [vehicleApi.reducerPath]: vehicleApi.reducer,
  [vehicleRouteApi.reducerPath]: vehicleRouteApi.reducer,
  [studentOneTimeAttendanceApi.reducerPath]: studentOneTimeAttendanceApi.reducer,
  [studentPeriodicAttendanceApi.reducerPath]: studentPeriodicAttendanceApi.reducer,
  [idCardDesignApi.reducerPath]: idCardDesignApi.reducer,
  [eventCalendarApi.reducerPath]: eventCalendarApi.reducer,
  [incidentApi.reducerPath]: incidentApi.reducer,
  [assignIncidentApi.reducerPath]: assignIncidentApi.reducer,
  [admittedYearApi.reducerPath]: admittedYearApi.reducer,
  [borrowedBookApi.reducerPath]: borrowedBookApi.reducer,
  [purposeApi.reducerPath]: purposeApi.reducer,
  [referenceApi.reducerPath]: referenceApi.reducer,
  [sourceApi.reducerPath]: sourceApi.reducer,
  [complaintTypeApi.reducerPath]: complaintTypeApi.reducer,
  [phoneCallLogApi.reducerPath]: phoneCallLogApi.reducer,
  [admissionEnquiryApi.reducerPath]: admissionEnquiryApi.reducer,
  [enquiryFollowUpApi.reducerPath]: enquiryFollowUpApi.reducer,
  [complainApi.reducerPath]: complainApi.reducer,
  [visitorBookApi.reducerPath]: visitorBookApi.reducer,
  [postalReceiveApi.reducerPath]: postalReceiveApi.reducer,
  [postalDispatchApi.reducerPath]: postalDispatchApi.reducer,
  [achievementCertificateDesignApi.reducerPath]: achievementCertificateDesignApi.reducer,
  [assignmentApi.reducerPath]: assignmentApi.reducer,
  [submissionApi.reducerPath]: submissionApi.reducer,
  [admissionApi.reducerPath]: admissionApi.reducer,
  [admissionApplicationApi.reducerPath]: admissionApplicationApi.reducer,
  [classTimeTableApi.reducerPath]: classTimeTableApi.reducer,
  [liveEmployeeMeetingApi.reducerPath]: liveEmployeeMeetingApi.reducer,
  [liveClassMeetingApi.reducerPath]: liveClassMeetingApi.reducer,
  [liveClassApi.reducerPath]: liveClassApi.reducer,
  [feeGroupApi.reducerPath]: feeGroupApi.reducer,
  [feeDiscountApi.reducerPath]: feeDiscountApi.reducer,
  [feeTypeApi.reducerPath]: feeTypeApi.reducer,
  [feeMasterApi.reducerPath]: feeMasterApi.reducer,
  [postApi.reducerPath]: postApi.reducer,
  [eventApi.reducerPath]: eventApi.reducer,
  [studentAchievementApi.reducerPath]: studentAchievementApi.reducer,
  [onlineCourseApi.reducerPath]: onlineCourseApi.reducer,
  [onlineCourseLessonApi.reducerPath]: onlineCourseLessonApi.reducer,
  [schoolWebsiteTeamApi.reducerPath]: schoolWebsiteTeamApi.reducer,
  [schoolWebsiteEventApi.reducerPath]: schoolWebsiteEventApi.reducer,
  [schoolWebsiteHeroApi.reducerPath]: schoolWebsiteHeroApi.reducer,
  [schoolWebsiteHomePageSecondApi.reducerPath]: schoolWebsiteHomePageSecondApi.reducer,
  [schoolWebsiteNoticeApi.reducerPath]: schoolWebsiteNoticeApi.reducer,
  [schoolWebsiteHistoryApi.reducerPath]: schoolWebsiteHistoryApi.reducer,
  [schoolWebsiteProgrammeApi.reducerPath]: schoolWebsiteProgrammeApi.reducer,
  [schoolWebsiteContactApi.reducerPath]: schoolWebsiteContactApi.reducer,
  [schoolWebsiteOtherSchoolInfoApi.reducerPath]: schoolWebsiteOtherSchoolInfoApi.reducer,
  [schoolWebsitePartnerApi.reducerPath]: schoolWebsitePartnerApi.reducer,
  [schoolWebsiteValuesApi.reducerPath]: schoolWebsiteValuesApi.reducer,
  [schoolWebsiteScholarshipDetailsApi.reducerPath]: schoolWebsiteScholarshipDetailsApi.reducer,
  [schoolWebsiteEcaApi.reducerPath]: schoolWebsiteEcaApi.reducer,
  [schoolWebsiteFacilitiesApi.reducerPath]: schoolWebsiteFacilitiesApi.reducer,

});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,

  // * (step III)
  // todo (api query): RTK QUERY REDUCERS (keep adding below)
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      authenticationApi.middleware,
      libraryApi.middleware,
      bookFineApi.middleware,
      librarySettingApi.middleware,
      newsLetterSubscriptionApi.middleware,
      contactUsApi.middleware,
      classApi.middleware,
      sectionApi.middleware,
      schoolUserAuthApi.middleware,
      subjectApi.middleware,
      hostelRoomTypeApi.middleware,
      hostelApi.middleware,
      hostelRoomApi.middleware,
      hostelStudentApi.middleware,
      hostelStudentFeesApi.middleware,
      streamApi.middleware,
      incomeHeadApi.middleware,
      incomeApi.middleware,
      expenseHeadApi.middleware,
      expenseApi.middleware,
      examTermApi.middleware,
      noticeApi.middleware,
      noticeCategoryAPI.middleware,
      productSupplierApi.middleware,
      productCategoryApi.middleware,
      productStoreApi.middleware,
      productApi.middleware,
      galleryApi.middleware,
      batchApi.middleware,
      schoolApi.middleware,
      employeeDepartmentApi.middleware,
      employeeDesignationApi.middleware,
      examHallApi.middleware,
      admitCardDesignApi.middleware,
      canteenItemApi.middleware,
      canteenItemOrderApi.middleware,
      vehicleApi.middleware,
      vehicleRouteApi.middleware,
      studentOneTimeAttendanceApi.middleware,
      studentPeriodicAttendanceApi.middleware,
      idCardDesignApi.middleware,
      eventCalendarApi.middleware,
      incidentApi.middleware,
      assignIncidentApi.middleware,
      admittedYearApi.middleware,
      borrowedBookApi.middleware,
      purposeApi.middleware,
      referenceApi.middleware,
      sourceApi.middleware,
      complaintTypeApi.middleware,
      phoneCallLogApi.middleware,
      admissionEnquiryApi.middleware,
      enquiryFollowUpApi.middleware,
      complainApi.middleware,
      visitorBookApi.middleware,
      postalReceiveApi.middleware,
      postalDispatchApi.middleware,
      achievementCertificateDesignApi.middleware,
      assignmentApi.middleware,
      submissionApi.middleware,
      admissionApi.middleware,
      admissionApplicationApi.middleware,
      classTimeTableApi.middleware,
      liveEmployeeMeetingApi.middleware,
      liveClassMeetingApi.middleware,
      liveClassApi.middleware,
      feeGroupApi.middleware,
      feeDiscountApi.middleware,
      feeTypeApi.middleware,
      feeMasterApi.middleware,
      postApi.middleware,
      eventApi.middleware,
      studentAchievementApi.middleware,
      onlineCourseApi.middleware,
      onlineCourseLessonApi.middleware,
      schoolWebsiteTeamApi.middleware,
      schoolWebsiteEventApi.middleware,
      schoolWebsiteHeroApi.middleware,
      schoolWebsiteHomePageSecondApi.middleware,
      schoolWebsiteNoticeApi.middleware,
      schoolWebsiteHistoryApi.middleware,
      schoolWebsiteProgrammeApi.middleware,
      schoolWebsiteContactApi.middleware,
      schoolWebsiteOtherSchoolInfoApi.middleware,
      schoolWebsitePartnerApi.middleware,
      schoolWebsiteValuesApi.middleware,
      schoolWebsiteScholarshipDetailsApi.middleware,
      schoolWebsiteEcaApi.middleware,
      schoolWebsiteFacilitiesApi.middleware,
    ),
});

setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

However when I comment 5 or 6 api.middlewares (randomly) I don’t get this error anymore.

//@ts-nocheck
import createGenericApi from "./globalApi";

export const schoolWebsiteTeamApi = createGenericApi('schoolWebsiteTeam')

export const {
  useGetSingleRecordMutation,
  usePostAddRecordMutation,
  useGetAllRecordForSpecificSchoolMutation,
  useDeleteRecordMutation,
  usePatchUpdateRecordMutation,
} = schoolWebsiteTeamApi;

this is my api

and createGenericApi function

//@ts-nocheck
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { globalConstant } from "constant/constant";
import { getDataByValue } from "services/LocalStorageService";

const createGenericApi = (modelName) => {
  return createApi({
    reducerPath: `${modelName}Api`,
    baseQuery: fetchBaseQuery({
      baseUrl: `${globalConstant.serverURL}/api/v1/`,
    }),
    endpoints: (builder) => ({
      //* POST ${modelName} --working
      postAddRecord: builder.mutation({
        query: (formData) => ({
          url: `${modelName}/create`,
          method: "POST",
          body: formData,
          formData: true,
          headers: {
            "x-school-id": getDataByValue("schoolId"),
            "x-school-unique-id": getDataByValue("schoolUniqueId"),
          },
        }),
      }),

      // * GET ALL ${modelName} FOR SPECIFIC SCHOOL --working
      getAllRecordForSpecificSchool: builder.mutation({
        query: () => {
          return {
            url: `${modelName}/get-all-for-school`,
            method: "POST",
            formData: true,
            headers: {
              "x-school-id": getDataByValue("schoolId"),
              "x-school-unique-id": getDataByValue("schoolUniqueId"),
            },
          };
        },
      }),

      // * GET ALL ${modelName} FOR SPECIFIC SCHOOL --working
      getAllRecordForSpecificSchoolByCourse: builder.mutation({
        query: (body) => {
          return {
            url: `${modelName}/get-all-for-school-by-course/${body.id}`,
            method: "POST",
            formData: true,
            headers: {
              "x-school-id": getDataByValue("schoolId"),
              "x-school-unique-id": getDataByValue("schoolUniqueId"),
            },
          };
        },
      }),

      //* DELETE A ${modelName} -- working
      deleteRecord: builder.mutation({
        query: (body) => {
          console.log(body);
          return {
            url: `${modelName}/${body.id}`,
            method: "DELETE",
            formData: true,
            headers: {
              "x-school-id": getDataByValue("schoolId"),
              "x-school-unique-id": getDataByValue("schoolUniqueId"),
            },
          };
        },
      }),

      //* PATCH  UPDATE ${modelName} --working
      patchUpdateRecord: builder.mutation({
        query: (payload) => {
          console.log(payload);
          return {
            url: `${modelName}/update/${payload.id}`,
            method: "PATCH",
            body: payload.formData,
            formData: true,
            headers: {
              "x-school-id": getDataByValue("schoolId"),
              "x-school-unique-id": getDataByValue("schoolUniqueId"),
            },
          };
        },
      }),

      // get single
      getSingleRecord: builder.mutation({
        query: (payload) => {
          return {
            url: `${modelName}/${payload.id}`,
            method: "GET",
            formData: true,
            headers: {
              "x-school-id": getDataByValue("schoolId"),
              "x-school-unique-id": getDataByValue("schoolUniqueId"),
            },
          };
        },
      }),
    }),
  });
};

export default createGenericApi;

I tried updating @reduxjs/toolkit", "redux-persist"
Tried not making the api files dynamic and wrote them again

3

Answers


  1. This type of error is mostly as a result of an infinite loop, you should spend some time looking at your code to find out where the infinite loop is happening.

    On the side, instead of adding headers on every query, you could create a global config and import it, something like this

    import { getDataByValue } from "services/LocalStorageService";
    import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
    
    export const baseQuery = fetchBaseQuery({
      baseUrl: process.env.NEXT_PUBLIC_API_URL,
      prepareHeaders: (headers, { getState }) => {
        const id = getDataByValue("schoolId");
        const uniqueId = getDataByValue("schoolUniqueId");
    
        if (id && uniqueId) {
          headers.set('x-school-id', id);
          headers.set('x-school-unique-id', uniqueId);
        }
        
        return headers;
      },
    });

    then you can import and use it in your api slice

    Login or Signup to reply.
  2. This can happen if you create too many apis and end up with too many middleware.

    Generally, an app should have only a single api. If you were talking to completely independent data sources, say a Twitter API, a flight tracking API, and a cake recipe API, it is okay to have multiple apis.

    But what you have here is just excessive.

    Quoting the documentation:

    Typically, you should only have one API slice per base URL that your application needs to communicate with. For example, if your site fetches data from both /api/posts and /api/users, you would have a single API slice with /api/ as the base URL, and separate endpoint definitions for posts and users. This allows you to effectively take advantage of automated re-fetching by defining tag relationships across endpoints.

    For maintainability purposes, you may wish to split up endpoint definitions across multiple files, while still maintaining a single API slice which includes all of these endpoints. See code splitting for how you can use the injectEndpoints property to inject API endpoints from other files into a single API slice definition.

    Login or Signup to reply.
  3. To back up @phry ‘s answer:

    Every middleware you add to the Redux store means more functions that have to run every time you dispatch an action!

    This is okay because normally a Redux app only has a handful of middleware (such as [thunk, someRtkqApi]).

    Adding dozens of separate RTK Query API slice instances + middleware to the Redux store is the wrong way to use RTK Query!

    Instead, those should likely be one API slice, possibly with additional injected endpoints.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search