Data Management via RTK Query

Detailed guide on RTK Query architecture (Code Splitting).

RTK Query Code Splitting Architecture

Architectural Invariant: It is forbidden to use createApi inside business modules of entities. The project uses a single caching core, divided into configuration and authorization layers. Features and entities "inject" their endpoints into the authorized core.

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;

02Base API Instance (Shared Layer)

The lowest level of network requests. No interceptors, only pure fetchBaseQuery and global tag registration.

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

03Authorization Interceptor (Entities Layer)

A wrapper (Middleware) over the base request. It allows centralized handling of session loss (e.g., error 401) and executing logout() for the entire application.

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

04Authorized API Instance (Entities Layer)

Initialization of a protected API instance (usually exported from the auth entity) using a custom 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)
});

05Endpoint Injection (Entities Layer)

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

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