👩‍💻 Инжектирование эндпоинтов в RTK Query и организация API в отдельных файлах

Когда вы работаете с несколькими сущностями в приложении, может возникнуть необходимость разделить логику работы с API на несколько частей для лучшей организации кода и повышения читаемости. Инжектирование эндпоинтов позволяет вам добавлять новые запросы к уже созданному базовому API, что упрощает управление и масштабирование вашего приложения.

Организация базового API

Рекомендуется создать отдельный файл для базового API, который будет содержать общие настройки, такие как baseQuery, reducerPath и другие параметры, а также общие эндпоинты.

// baseApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseApi = createApi({
  reducerPath: 'baseApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'], // Определяем типы тегов для инвалидации кэша
});

export default baseApi;

Создание эндпоинтов для различных сущностей

Теперь вы можете создать отдельные файлы для каждой сущности, добавляя в них необходимые эндпоинты и используя базовый API.

// userApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const userApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchUsers: builder.query({
      query: () => 'users',
      providesTags: ['User'], // Указываем, что этот запрос использует тег 'User'
    }),
    addUser: builder.mutation({
      query: (newUser) => ({
        url: 'users',
        method: 'POST',
        body: newUser,
      }),
      invalidatesTags: ['User'], // Инвалидируем кэш для 'User'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchUsersQuery, useAddUserMutation } = userApi;
export default userApi;

Пример эндпоинтов для постов

// postApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const postApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: ['Post'], // Указываем, что этот запрос использует тег 'Post'
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'], // Инвалидируем кэш для 'Post'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchPostsQuery, useAddPostMutation } = postApi;
export default postApi;

Инжектирование эндпоинтов в RTK Query позволяет вам создавать гибкую и масштабируемую архитектуру для работы с несколькими сущностями. Разделение логики API на отдельные файлы помогает поддерживать чистоту и порядок в коде, а использование базового API упрощает добавление новых эндпоинтов. Такой подход способствует улучшению читаемости и поддерживаемости вашего приложения.