RTK Query非序列化日期查询参数问题求助

问题核心在于：RTK Query会将**原始查询参数（originalArgs）**直接存入Redux状态，而你配置的serializeQueryArgs仅用于生成缓存键，不会修改原始参数。所以即便处理了缓存键的序列化，原始的Date对象依然留在状态中，触发Redux的非序列化检查警告。

以下是几个可行的解决方案：

方案一：忽略特定路径的非序列化检查 #

如果想保留Date类型的参数定义，可在Redux Store配置中指定忽略该路径的检查，既能继续用Date传参，也不会触发警告：

import { configureStore } from '@reduxjs/toolkit';
import { MyApi } from './path/to/your/api';

export const store = configureStore({
  reducer: {
    [MyApi.reducerPath]: MyApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略查询参数中date字段的非序列化检查
        ignoredPaths: ['myApi.queries.*.originalArgs.schedule.date'],
      },
    }).concat(MyApi.middleware),
});

方案二：调用查询前将Date转换为字符串 #

修改参数接口，将date类型改为字符串，调用时手动把Date对象转成ISO字符串，从根源上避免非序列化问题：

1. 更新接口定义 #

export interface ScheduleIdentifier {
  code: string;
  date: string; // 从Date改为string类型
}

export interface GetScheduleVariables {
  schedule: ScheduleIdentifier;
}

2. 调用查询时转换参数 #

// 假设你有一个Date对象
const targetDate = new Date();

// 调用查询时转成ISO格式字符串
const { data } = useGetScheduleQuery({
  schedule: {
    code: 'your-code-here',
    date: targetDate.toISOString()
  }
});

3. 简化缓存键生成（可选） #

此时参数本身已是字符串，可直接去掉自定义的serializeQueryArgs，RTK Query会自动处理缓存键：

getSchedule: builder.query<GetSchedule, GetScheduleVariables>({
  query: (params) => ({
    url: '/your-schedule-endpoint',
    params: {
      code: params.schedule.code,
      date: params.schedule.date
    }
  })
})

方案三：用transformArg预处理参数（需配合忽略检查） #

如果不想修改接口定义，可在endpoint中用transformArg预处理参数，但要注意：transformArg仅修改用于请求的参数，originalArgs仍会保留原始Date对象，所以需要配合方案一的忽略检查：

getSchedule: builder.query<GetSchedule, GetScheduleVariables>({
  // 预处理参数，将Date转成字符串
  transformArg: (args) => ({
    ...args,
    schedule: {
      ...args.schedule,
      date: args.schedule.date.toISOString()
    }
  }),
  // 用处理后的参数生成缓存键
  serializeQueryArgs: ({ queryArgs }) => {
    return JSON.stringify({
      schedule: {
        code: queryArgs.schedule.code,
        date: queryArgs.schedule.date.toISOString()
      }
    });
  },
  query: (processedArgs) => ({
    url: '/your-schedule-endpoint',
    params: processedArgs.schedule
  })
})

总结：方案二更符合Redux序列化原则，方案一则适合需要保留Date类型定义的场景。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams