RTK Query新增用户后如何清除列表查询缓存？

我有两个通过tagTypes关联的RTK Query端点：

• 第一个是getUsers查询，点击“加载更多”按钮时会重新获取数据并合并新旧数据；
• 第二个是createNewUser新增用户的Mutation。

相关代码如下：

export const usersApi = createApi({
  reducerPath: "userApi",
  baseQuery: fetchBaseQuery({ baseUrl: "url" }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    getUsers: builder.query({
        query: ({page}) => `users?page=${page}&count=6`,
        serializeQueryArgs: ({ endpointName }) => {
            return endpointName
          },
        merge: (currentCache, newItems, {arg}) => {
            currentCache?.users?.push(...newItems?.users)
        },
        forceRefetch({ currentArg, previousArg }) {
            return currentArg !== previousArg
        },
        providesTags: ['User']
        }),
    createNewUser: builder.mutation({
      query: ({token, formData}) => ({
        url: `users`,
        method: 'POST',
        headers: {
          'Token': token,
        },
        body: formData,
      }),
      invalidatesTags: ['User'],
    })
    }) 
})

当前问题：执行新增用户的Mutation后，getUsers端点会自动重新获取数据并合并新旧缓存，这不符合需求。希望每次执行该Mutation后，直接清除getUsers的当前缓存。

你可以在createNewUser的Mutation中添加onSuccess回调，调用RTK Query的resetQueryData工具重置getUsers的缓存，以此避免自动重新获取并合并数据的行为。

修改后的代码如下：

export const usersApi = createApi({
  reducerPath: "userApi",
  baseQuery: fetchBaseQuery({ baseUrl: "url" }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    getUsers: builder.query({
        query: ({page}) => `users?page=${page}&count=6`,
        serializeQueryArgs: ({ endpointName }) => {
            return endpointName
          },
        merge: (currentCache, newItems, {arg}) => {
            currentCache?.users?.push(...newItems?.users)
        },
        forceRefetch({ currentArg, previousArg }) {
            return currentArg !== previousArg
        },
        providesTags: ['User']
        }),
    createNewUser: builder.mutation({
      query: ({token, formData}) => ({
        url: `users`,
        method: 'POST',
        headers: {
          'Token': token,
        },
        body: formData,
      }),
      async onSuccess(_, __, context) {
        // 重置getUsers查询的所有缓存数据
        await context.api.util.resetQueryData('getUsers')
      },
      // 移除原有的invalidatesTags，避免触发自动重新获取
      // invalidatesTags: ['User'],
    })
    }) 
})

补充说明 #

• resetQueryData会直接清除指定查询的缓存，不会触发自动重新请求；
• 后续如果需要重新加载用户列表，手动调用useGetUsersQuery的refetch方法即可；
• 移除invalidatesTags: ['User']是为了彻底关闭原来的自动重新获取逻辑，确保只有缓存清除的行为生效。

内容的提问来源于stack exchange，提问作者itan mare