Как изменить теги в RTK Query, чтобы после выполнения мутации была инвалидирована только определенная запрос, а не все?

Как можно реализовать инвалидацию обеих квери мутации, когда это необходимо делать только для одной, используя три определенных тега?
  • 7 августа 2024 г. 15:33
Ответы на вопрос 2
Для указания тегов в RTK Query можно использовать опцию **`invalidatesTags`** в конфигурации мутации. 

Например, чтобы инвалидировать только определенную квери после выполнения мутации, можно указать тег этой квери в массиве опции **`invalidatesTags`**:

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchData: builder.query({
      query: (data) => `/data/${data}`,
    }),
    updateData: builder.mutation({
      query: (data) => ({
        url: '/data/update',
        method: 'POST',
        body: data,
      }),
      invalidatesTags: ['fetchData'], // Инвалидация только тега fetchData
    }),
  }),
});
```

Чтобы инвалидировать обе квери после выполнения мутации только в случае необходимости, можно указать несколько тегов в массиве опции **`invalidatesTags`** для мутации:

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchData1: builder.query({
      query: (data) => `/data1/${data}`,
    }),
    fetchData2: builder.query({
      query: (data) => `/data2/${data}`,
    }),
    updateData: builder.mutation({
      query: (data) => ({
        url: '/data/update',
        method: 'POST',
        body: data,
      }),
      invalidatesTags: ['fetchData1', 'fetchData2'], // Инвалидация обоих тегов при выполнении мутации
    }),
  }),
});
```

Таким образом, можно легко указывать теги, которые нужно инвалидировать после выполнения мутации в RTK Query, чтобы управлять поведением кэширования данных.
У объекта тега могуть быть только type и id: 
An individual tag has a type, represented as a string name, and an optional id, represented as a string or number. It can be represented as a plain string (such as 'Post'), or an object in the shape {type: string, id?: string|number} (such as [{type: 'Post', id: 1}]).
https://redux-toolkit.js.org/rtk-query/usage/autom...

Так что вашу структуру нужно разделить на несколько тегов:
getInvoiceReviewTaskDetails: build.query<InvoiceReviewTaskDetails, number>({
  ...
  providesTags: (response) =>
    response ?
      [
        { type: TagTypes.VendorInvoiceReview, id: response.id },
        { type: TagTypes.VendorInvoiceReview, id: `vendor-${response.vendor.id}` },
        { type: TagTypes.VendorInvoiceReview, id: `facility-${response.facility.id}` },
      ] : []
}),

updateInvoiceReviewTask: build.mutation<void, UpdateFacilityInvoiceReviewTaskRequest>({
  ...
  invalidatesTags: (response, error, params) =>
    [
      { type: TagTypes.VendorInvoiceReview, id: `vendor-${params.vendor_id}` },
      { type: TagTypes.VendorInvoiceReview, id: `facility-${params.facility_id}` },
    ]
})


Но можно обойтись и одним:
getInvoiceReviewTaskDetails: build.query<InvoiceReviewTaskDetails, number>({
  ...
  providesTags: (response) =>
    response ?
      [{ type: TagTypes.VendorInvoiceReview, id: `vendor-${response.vendor.id},facility-${response.facility.id}` }] : []
}),

updateInvoiceReviewTask: build.mutation<void, UpdateFacilityInvoiceReviewTaskRequest>({
  ...
  invalidatesTags: (response, error, params) =>
    [{ type: TagTypes.VendorInvoiceReview, id: `vendor-${params.vendor_id},facility-${params.facility_id}` }]
})
Похожие вопросы