如何避免RTK Query使用缓存数据时执行transformResponse

RTK Query默认会把原始响应数据存入缓存，每次读取缓存时都会重新执行transformResponse，这就是你遇到重复转换的原因。要让缓存数据跳过重复转换，核心是让缓存直接存储转换后的最终数据，下面是最直接的可行方案：

方案：将转换逻辑移至queryFn #

把数据转换逻辑从transformResponse转移到自定义queryFn中，这样只有当发起实际网络请求时才执行一次转换，转换后的结果会直接存入缓存，后续读取缓存时直接使用转换好的数据，无需重复处理。

示例代码：

const yourApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getStaticData: builder.query({
      queryFn: async (args, api, extraOpts, baseQuery) => {
        // 发起原始请求
        const response = await baseQuery('/static-data-endpoint');
        if (response.error) {
          return response; // 直接返回错误，不做转换
        }
        // 仅在请求成功时执行一次转换
        const transformedData = response.data.map(item => {
          // 你的转换逻辑，比如映射字段、格式化数据
          return {
            uid: item.id,
            displayName: `${item.firstName} ${item.lastName}`,
            formattedDate: new Date(item.createTime).toLocaleDateString()
          };
        });
        return { data: transformedData };
      },
      keepUnusedDataFor: 60 * 60 * 12, // 12小时缓存
    }),
  }),
});

原理说明 #

RTK Query的transformResponse设计初衷是对每次获取到的响应数据（不管是网络请求返回还是缓存读取）做转换，所以只要缓存存的是原始数据，就会重复执行。而queryFn的返回结果会直接作为缓存内容存储，从根源上避免了重复转换的问题。

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