Data Management via RTK Query

Detailed guide on RTK Query architecture (Code Splitting).

RTK Query Code Splitting Architecture

Architectural Invariant: createApi is called only once — in shared/api/backend/base.api.ts. All entities inject their endpoints into this single baseApi (one cache, one tag registry). A separate createApi is allowed only for an external service with a different baseUrl.

API Core File Structure

01Global Tag Registry (Shared Layer)

For correct operation of invalidation providesTags / invalidatesTags, all possible tags are collected in a centralized config.

shared/api/backend/tags.config.ts

export const ENUM_API_TAGS = {
	USER: "User",
	BOOKING_ORDERS: "Booking Orders",
    // и другие теги...
} as const;

02Session Expired Action (Shared Layer)

An action declared in shared, so baseApi does not depend on entities. The auth slice subscribes to it via extraReducers and resets the session.

shared/api/backend/session-expired.action.ts

import { createAction } from "@reduxjs/toolkit";

/** Диспатчится baseApi при 401; auth slice подписывается через extraReducers */
export const sessionExpired = createAction("api/sessionExpired");

// entities/auth/model/auth.slice.ts
// extraReducers: (builder) => {
// 	builder.addCase(sessionExpired, () => initialState);
// }

03Base API Instance with Auth Guard (Shared Layer)

The only createApi in the project. Its base query wraps fetchBaseQuery: on 401 it dispatches sessionExpired() from shared, without importing entities.

shared/api/backend/base.api.ts

import {
	type BaseQueryFn,
	type FetchArgs,
	type FetchBaseQueryError,
	createApi,
	fetchBaseQuery
} from "@reduxjs/toolkit/query/react";
import { ENV } from "@/shared/config";
import { sessionExpired } from "./session-expired.action";
import { ENUM_API_TAGS } from "./tags.config";

const rawBaseQuery = fetchBaseQuery({
	baseUrl: ENV.VITE_API_URL,
	credentials: "include"
});

/** 401 → sessionExpired(); слой shared не импортирует entities */
const baseQueryWithAuthGuard: BaseQueryFn<
	string | FetchArgs,
	unknown,
	FetchBaseQueryError
> = async (args, api, extraOptions) => {
	const result = await rawBaseQuery(args, api, extraOptions);

	if (result.error?.status === 401) {
		api.dispatch(sessionExpired());
	}
	return result;
};

/** Единственный createApi проекта — все entities инжектят сюда */
export const baseApi = createApi({
	baseQuery: baseQueryWithAuthGuard,
	reducerPath: "baseApi",
	endpoints: () => ({}),
	tagTypes: Object.values(ENUM_API_TAGS)
});

04Endpoint Injection (Entities Layer)

The final stage in the target entity. We import baseApi and call injectEndpoints. This code becomes the public service of the entity.

entities/booking/order/api/booking-order.service.ts

import { baseApi, ENUM_API_TAGS } from "@/shared/api/backend";

export const bookingOrderApi = baseApi.injectEndpoints({
	endpoints: (builder) => ({
		getBookingOrders: builder.query<TResponse, TFilters>({
			query: (filters) => ({ url: "/booking/orders" }),
			providesTags: [ENUM_API_TAGS.BOOKING_ORDERS]
		})
	})
});