如何在RTK Query中自定义缓存并忽略特定查询参数

要实现仅基于部分查询参数（如param1、param2）进行缓存，忽略其他参数（param3、param4）的影响，核心是自定义缓存key的生成逻辑，RTK Query提供两种直接的实现方式：

方法一：全局自定义serializeQueryArgs（推荐） #

在创建API切片时，重写serializeQueryArgs函数，只提取需要参与缓存的参数生成缓存key，同时保留所有参数传给API接口。

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

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base-url' }),
  // 自定义缓存key生成逻辑：仅使用param1和param2
  serializeQueryArgs: ({ queryArgs }) => {
    const { param1, param2 } = queryArgs;
    return JSON.stringify({ param1, param2 });
  },
  endpoints: (builder) => ({
    req: builder.query({
      // 仍将所有参数传递给API
      query: (params) => ({
        url: '/req-endpoint',
        method: 'GET',
        params: params,
      }),
    }),
  }),
});

export const { useReqQuery } = myApi;

调用useReqQuery({ param1, param2, param3, param4 })时：

• API会收到全部四个参数
• 只有param1或param2变化时，才会触发新的缓存逻辑；param3/param4变化不会影响缓存命中

方法二：在Query中手动指定cacheKey #

如果不想全局修改序列化逻辑，可以在单个endpoint的query函数中，手动指定缓存key，同时分离缓存参数和其他参数。

endpoints: (builder) => ({
  req: builder.query({
    query: ({ cacheParams, otherParams }) => ({
      url: '/req-endpoint',
      method: 'GET',
      // 合并所有参数传给API
      params: { ...cacheParams, ...otherParams },
      // 仅用缓存参数生成key
      cacheKey: JSON.stringify(cacheParams),
    }),
  }),
});

// 调用hook时传入分离后的参数
useReqQuery({
  cacheParams: { param1: 'value1', param2: 'value2' },
  otherParams: { param3: 'value3', param4: 'value4' }
});

注意事项 #

• 确保业务场景允许忽略param3/param4的缓存影响：如果这些参数会改变API返回结果，复用缓存会导致数据不一致，请谨慎使用。
• 如需强制刷新缓存，可在调用hook时使用forceRefetch选项自定义触发条件：

  const { data, refetch } = useReqQuery(params, {
    forceRefetch: (currentArg, previousArg) => {
      // 示例：当param3变化时强制刷新
      return currentArg.param3 !== previousArg.param3;
    }
  });
  

内容的提问来源于stack exchange，提问作者Ma.ft