The Rtk query does not create endpoints

Question

My problem is that when I use code splitting in RTK-query it doesn't work for me and I don't understand why

App.jsx

import React from "react";
import { Provider } from "react-redux";
import store, { persistor } from "store";

import "assets/styles/main.scss";
import { BrowserRouter } from "react-router-dom";
import AppRouter from "routes/AppRouter";
import Session from "utils/session";
import { PersistGate } from "redux-persist/integration/react";
import { ThemeProvider } from "@emotion/react";
import { SnackbarProvider } from "notistack";
import { theme } from "constants/theme";

const App = () => {
    if (Session.isTokenSet()) {
        Session.setHeaders();
    }

    return (
        <ThemeProvider theme={theme}>
            <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <SnackbarProvider
                        anchorOrigin={{
                            vertical: "top",
                            horizontal: "right"
                        }}
                        preventDuplicate
                        autoHideDuration={3000}
                        maxSnack={2}
                    >
                        <BrowserRouter>
                            <AppRouter />
                        </BrowserRouter>
                    </SnackbarProvider>
                </PersistGate>
            </Provider>
        </ThemeProvider>
    );
};

export default App;

My redux-toolkit store index.js

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

import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER
} from "redux-persist";
import storage from "redux-persist/lib/storage";

import authReducer from "./auth/authSlice";
import { apiSlice } from "api/apiSlice";

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["auth"]
};

export const rootReducer = combineReducers({
    [apiSlice.reducerPath]: apiSlice.reducer,
    auth: authReducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

export const persistor = persistStore(store);

export default store;

apiSlice.js

import { fetchBaseQuery, createApi } from "@reduxjs/toolkit/dist/query";
import { logOut, setCredentials } from "store/auth/authSlice";
import Session from "utils/session";
import { baseAdminURL } from "utils/utils";

const baseQuery = fetchBaseQuery({
    baseUrl: baseAdminURL,
    credentials: "include",
    prepareHeaders: (headers, { getState }) => {
        const token = getState().auth.token;
        if (token) {
            headers.set("authorization", token);
        }
        return headers;
    }
});

const firebaseQuery = fetchBaseQuery({
    baseUrl: `https://securetoken.googleapis.com/v1/token?key=${process.env.REACT_APP_FIREBASE_API_KEY}`,
    method: "POST",
    body: {
        grant_type: "refresh_token",
        refresh_token: Session.getRefreshToken()
    }
});

const baseQueryWithReauth = async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions);

    if (result?.error?.originalStatus === 401) {
        console.log("sending refresh token");

        const refreshResult = await firebaseQuery("", api, extraOptions);

        console.log(refreshResult);

        if (refreshResult?.data) {
            const user = api.getState().auth.user;
            // store the new token
            api.dispatch(setCredentials({ ...refreshResult.data, user }));
            // retry the original query with new access token
            result = await baseQuery(args, api, extraOptions);
        } else {
            api.dispatch(logOut());
        }
    }
    // else if (result?.error?.originalStatus === 403) {
    //     console.log("logout and redirect to login page");
    // }

    return result;
};

export const apiSlice = createApi({
    baseQuery: baseQueryWithReauth,
    endpoints: (build) => ({})
});

And the main problem arises when I want to apply injectEndpoints

authApiSlice.js

import { apiSlice } from "api/apiSlice";

export const authApiSlice = apiSlice.injectEndpoints({
    endpoints: (build) => ({
        getUser: build.query({
            query: (uid) => ({
                url: "user",
                params: {
                    id: uid
                }
            })
        })
    })
});

export const {  } = authApiSlice; // <- <- this line

I expect injectEndpoints to give me useGetUserQuery, but it doesn't happen, and I can't do anything further enter image description here

Answer 1

You import createApi in the non-react version, so that will not create react hooks.

Do

import { fetchBaseQuery, createApi } from "@reduxjs/toolkit/query/react";