Управление данными (RTK Query)

Детальное руководство по архитектуре RTK Query (Code Splitting).

Архитектура разделения кода RTK Query

Архитектурный инвариант: createApi вызывается один раз — в shared/api/backend/base.api.ts. Все сущности внедряют эндпоинты в единый baseApi (один кэш, один реестр тегов). Отдельный createApi допустим только для внешнего сервиса с другим baseUrl.

Файловая структура API-ядра

01Глобальный реестр тегов (Shared Layer)

Для корректной работы инвалидации providesTags / invalidatesTags, все возможные теги собираются в централизованный конфиг.

shared/api/backend/tags.config.ts

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

02Action истечения сессии (Shared Layer)

Action объявлен в shared, поэтому baseApi не зависит от entities. Auth slice подписывается на него через extraReducers и сбрасывает сессию.

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);
// }

03Базовый API инстанс с auth guard (Shared Layer)

Единственный createApi в проекте. Его base query оборачивает fetchBaseQuery: при 401 диспатчит sessionExpired() из shared, не импортируя 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)
});

04Внедрение Эндпоинтов (Entities Layer)

Финальный этап в целевой сущности. Мы импортируем baseApi и вызываем injectEndpoints. Этот код и становится публичным сервисом сущности.

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]
		})
	})
});