Please Help me, This is the error
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
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
then you can import and use it in your api slice
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:
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.