Как изменить теги в 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: <br/> <blockquote>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 <code class="javascript">'Post'</code>), or an object in the shape <code class="javascript">{type: string, id?: string|number}</code> (such as <code class="javascript">[{type: 'Post', id: 1}]</code>).</blockquote> <a href="https://redux-toolkit.js.org/rtk-query/usage/automated-refetching" rel="nofollow">https://redux-toolkit.js.org/rtk-query/usage/autom...</a> <br/> <br/> Так что вашу структуру нужно разделить на несколько тегов: <br/> <pre><code class="javascript">getInvoiceReviewTaskDetails: build.query&lt;InvoiceReviewTaskDetails, number&gt;({
  ...
  providesTags: (response) =&gt;
    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&lt;void, UpdateFacilityInvoiceReviewTaskRequest&gt;({
  ...
  invalidatesTags: (response, error, params) =&gt;
    [
      { type: TagTypes.VendorInvoiceReview, id: `vendor-${params.vendor_id}` },
      { type: TagTypes.VendorInvoiceReview, id: `facility-${params.facility_id}` },
    ]
})</code></pre> <br/> <br/> Но можно обойтись и одним: <br/> <pre><code class="javascript">getInvoiceReviewTaskDetails: build.query&lt;InvoiceReviewTaskDetails, number&gt;({
  ...
  providesTags: (response) =&gt;
    response ?
      [{ type: TagTypes.VendorInvoiceReview, id: `vendor-${response.vendor.id},facility-${response.facility.id}` }] : []
}),

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