How to solve uncaught reference error when injecting endpoints in RTK Query code splitting approach

  Kiến thức lập trình

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?

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT