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

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

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

Архитектурный инвариант: Запрещено использовать createApi внутри бизнес-модулей сущностей. Проект использует единое ядро кэширования, разделенное на слои конфигурации и авторизации. Фичи и сущности "внедряют" свои эндпоинты в авторизованное ядро.

Файловая структура 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;

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

Самый нижний уровень сетевых запросов. Никаких перехватчиков, только чистый fetchBaseQuery и регистрация глобальных тегов.

shared/api/backend/base.api.ts

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { ENV } from "@/shared/config";
import { ENUM_API_TAGS } from "./tags.config";

export const baseApi = createApi({
	baseQuery: fetchBaseQuery({
		baseUrl: ENV.VITE_API_URL,
		credentials: "include"
	}),
	reducerPath: "baseApi",
	endpoints: () => ({}),
	tagTypes: Object.values(ENUM_API_TAGS)
});

03Перехватчик Авторизации (Entities Layer)

Обертка (Middleware) над базовым запросом. Позволяет централизованно обработать потерю сессии (например, ошибку 401) и выполнить logout() на всё приложение.

entities/auth/api/auth-base-query.ts

import { type BaseQueryFn, type FetchArgs, type FetchBaseQueryError, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { ENV } from "@/shared/config";
import { logout } from "@/entities/user/slice/user.slice";

export const authBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
	const baseQuery = fetchBaseQuery({ baseUrl: ENV.VITE_API_URL, credentials: "include" });
	const result = await baseQuery(args, api, extraOptions);

	if (result.error && result.error.status === 401) {
		api.dispatch(logout());
	}
	return result;
};

04Авторизованный API инстанс (Entities Layer)

Инициализация защищенного API-инстанса (обычно экспортируется из сущности auth), использующего кастомный authBaseQuery.

entities/auth/api/auth.api.ts

import { createApi } from "@reduxjs/toolkit/query/react";
import { ENUM_API_TAGS } from "@/shared/api/backend/tags.config";
import { authBaseQuery } from "./auth-base-query";

export const authApi = createApi({
	baseQuery: authBaseQuery,
	reducerPath: "authApi",
	endpoints: () => ({}),
	tagTypes: Object.values(ENUM_API_TAGS)
});

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

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

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

import { authApi } from "@/entities/auth/api/auth.api";

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