I’m using the RTK Query package and React TypeScript. I implemented code splitting, global error handling, and added a custom base URL:
basicApi file:
import { createApi, fetchBaseQuery, BaseQueryApi, FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query/react'
import { enqueueSnackbar } from 'notistack'
const baseUrl = import.meta.env.VITE_BACKEND_BASE_URL;
const baseQuery = fetchBaseQuery({
baseUrl,
prepareHeaders: (headers) => {
const token = getToken()
if (token) {
headers.set('Authorization', `Bearer ${token}`)
}
return headers
},
})
const customBaseQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: FetchBaseQueryError | object) => {
const result = await baseQuery(args, api, extraOptions);
if (result.error && result.error.status === 401) {
sessionStorage.clear()
}
if (result.error && +(result.error.status) >= 500) {
enqueueSnackbar('Server encountered an unexpected condition that prevented it from fulfilling the request. Please try again later.',
{ variant: 'error' })
}
return result;
}
// initialize an empty api service that we'll inject endpoints into later as needed
export const basicSetup = createApi({
reducerPath: 'basicApi',
tagTypes: ['Account', 'AccountWorkflowApi', 'Note', 'Workflow'],
baseQuery: customBaseQuery,
endpoints: () => ({}),
})
noteService file:
import { NoteType } from '@root/types/note'
import { PaginationResponseType } from '@root/types/pagination'
import { basicSetup } from './basicSetup'
export const noteApi = basicSetup.injectEndpoints({
endpoints: (builder) => ({
getNotes: builder.query<PaginationResponseType<NoteType[]>, any>({
query: () => {
return ('/noted')
},
providesTags: ['Note'], // Provide the 'Note' tag
}),
}),
overrideExisting: false,
})
export const { useGetNotesQuery, useAddNoteMutation } = noteApi
Now I faced an error like this:
Uncaught ReferenceError: Cannot access ‘basicSetup’ before
initialization at noteService.ts
Has anyone an idea to solve it?