Как можно избежать дублирования практически одинаковых API-запросов при использовании RTK Query?

Как можно устранить дублирование в указанных 6 API?

Можно заменить повторяющиеся части, такие как "app1-path", "reducerPath" и названия, на параметры. Однако, как поступить с "DataPropsForApp1" я не знаю. Возможно, использование дженериков может помочь, но я не уверен, как это сделать. Можете подсказать?
  • 15 ноября 2023 г. 10:30
Ответы на вопрос 1
Для избежания дублирования практически одинаковых API-запросов при использовании RTK Query можно воспользоваться концепцией сущностей (entities) и дженериков.

Вместо повторяющихся частей, таких как "app1-path" и названия, вы можете передавать их как параметры.

Однако, вам также потребуется решить проблему с типами данных для каждого запроса. Для этого можно использовать дженерики.

Ниже приведен пример, как можно организовать код с использованием сущностей и дженериков:

```typescript
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Создаем конфигурацию API
const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // Определяем API-запросы для первого приложения
    getApp1Data: builder.query<DataPropsForApp1, string>({
      query: (param) => `app1-path/${param}`, // используем параметр для переменной части пути
     }),
     
     updateApp1Data: builder.mutation<DataPropsForApp1, Partial<DataPropsForApp1>>({
      query: (param) => ({
        url: `app1-path/${param.id}`, // используем параметр для переменной части пути
        method: 'PUT',
        body: param.data,
      }),
    }),
    
    // Определяем API-запросы для второго приложения
    getApp2Data: builder.query<DataPropsForApp2, string>({
      query: (param) => `app2-path/${param}`, // используем параметр для переменной части пути
     }),
     
     updateApp2Data: builder.mutation<DataPropsForApp2, Partial<DataPropsForApp2>>({
      query: (param) => ({
        url: `app2-path/${param.id}`, // используем параметр для переменной части пути
        method: 'PUT',
        body: param.data,
      }),
    }),
    
    // Определяем API-запросы для третьего приложения
    // ...
  }),
});

// Экспортируем хуки для использования в компонентах
export const { useGetApp1DataQuery, useUpdateApp1DataMutation, useGetApp2DataQuery, useUpdateApp2DataMutation } = api;

// Пример использования в компоненте
const MyComponent = () => {
  const { data: app1Data } = useGetApp1DataQuery('param1');
  const { data: app2Data } = useGetApp2DataQuery('param2');
  
  // ...
}
```

В этом примере мы использовали дженерики для определения типов данных запросов. `DataPropsForApp1` и `DataPropsForApp2` являются интерфейсами ваших данных, которые вы можете определить в соответствии с вашей схемой ответа от сервера. Вы можете изменить их на соответствующие типы данных.

Таким образом, вы сможете избежать дублирования практически одинаковых запросов, используя параметры и дженерики.
Похожие вопросы