如何通过deleteEmployee Mutation标签失效触发getEmployees自动重取？

RTK Query的标签失效自动重取机制只对query端点生效，你现在把获取员工数据的逻辑放在了mutation里，所以deleteEmployee失效标签后不会自动触发它重新执行。下面给两种可行的解决办法：

方案一：将getEmployees改为query端点（推荐） #

虽然后端要求用POST请求获取数据，但RTK Query的query端点支持自定义请求方法，完全可以满足需求。改成query后就能自动利用标签失效的重取机制：

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'

export const publicApi = createApi({
  reducerPath: 'publicApi',
  baseQuery: customFetchBase,
  tagTypes: ['employees'],
  endpoints: builder => ({
    // 把mutation改成query
    getEmployees: builder.query({
      query: ({
        formData = "defaultHashedDataString",
        salt = "xyz",
        pageIndex = 1
      }) => ({
        url: '/Hafez/Employee/Data',
        method: 'POST', // 依然使用POST方法
        body: {
          RequestVerificationToken: salt,
          FormData: formData,
          currentPage: pageIndex + 1
        }
      }),
      providesTags: ['employees']
    }),
    deleteEmployee: builder.mutation({
      query: ({ formData, salt }) => ({
        url: '/Hafez/Employee/Delete',
        method: 'POST',
        body: { RequestVerificationToken: salt, FormData: formData }
      }),
      invalidatesTags: ['employees'] // 失效标签后，getEmployees会自动重取
    })
  })
})

// 注意导出的hook变成useGetEmployeesQuery
export const { useGetEmployeesQuery, useDeleteEmployeeMutation } = publicApi

使用时替换原来的useGetEmployeesMutation为useGetEmployeesQuery即可，它会自动管理数据的获取、缓存和重取逻辑。

方案二：手动触发getEmployees执行（仅当无法改成query时使用） #

如果必须保留getEmployees为mutation端点，可以在deleteEmployee的onQueryStarted回调里手动触发它的执行：

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'

export const publicApi = createApi({
  reducerPath: 'publicApi',
  baseQuery: customFetchBase,
  tagTypes: ['employees'],
  endpoints: builder => ({
    getEmployees: builder.mutation({
      query: ({
        formData = "defaultHashedDataString",
        salt = "xyz",
        pageIndex = 1
      }) => ({
        url: '/Hafez/Employee/Data',
        method: 'POST',
        body: {
          RequestVerificationToken: salt,
          FormData: formData,
          currentPage: pageIndex + 1
        }
      }),
      providesTags: ['employees']
    }),
    deleteEmployee: builder.mutation({
      query: ({ formData, salt }) => ({
        url: '/Hafez/Employee/Delete',
        method: 'POST',
        body: { RequestVerificationToken: salt, FormData: formData }
      }),
      invalidatesTags: ['employees'],
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        try {
          await queryFulfilled;
          // 传入getEmployees需要的参数，根据实际业务场景调整
          dispatch(publicApi.endpoints.getEmployees.initiate({
            formData: "defaultHashedDataString",
            salt: "xyz",
            pageIndex: 1
          }));
        } catch (err) {
          // 可在此处理删除失败的逻辑
        }
      }
    })
  })
})

export const { useGetEmployeesMutation, useDeleteEmployeeMutation } = publicApi

这种方法需要手动维护getEmployees的参数，不如方案一简洁，因此优先推荐方案一。

内容的提问来源于stack exchange，提问作者Alireza Kordkheili