Как можно реализовать инвалидацию обеих квери мутации, когда это необходимо делать только для одной, используя три определенных тега?
Для указания тегов в 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<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}` },
]
})</code></pre> <br/> <br/> Но можно обойтись и одним: <br/> <pre><code class="javascript">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}` }]
})</code></pre>