Redux RTK Query：如何配置返回硬编码数据模型？

问题背景 #

你正在用Redux RTK Query实现前后端连接，现有代码能正常调用真实后端接口，但部分接口未就绪，希望在不修改组件代码的前提下，直接在getSomeData接口定义中返回硬编码的模拟数据，且能快速切换到真实接口。

现有真实接口代码：

export const subscriptionServiceApi = createApi({
  reducerPath: "...",
  baseQuery: fetchBaseQuery({
    baseUrl: ...,
    prepareHeaders: ...,
  }),
  tagTypes: [...],
  endpoints: (builder) => ({
    getSomeData: builder.query<QuoteRes, string>({
      query: (param_id) => `example/${param_id}`
    }),
  })
})

解决方案：使用queryFn替代query #

RTK Query的builder.query支持通过queryFn自定义数据获取逻辑，你可以直接在其中返回硬编码数据，实现模拟后端的效果，且能和真实接口写法快速切换。

1. 模拟数据的写法 #

将原来的query替换为queryFn，直接返回符合QuoteRes类型的模拟数据：

export const subscriptionServiceApi = createApi({
  reducerPath: "...",
  baseQuery: fetchBaseQuery({
    baseUrl: ...,
    prepareHeaders: ...,
  }),
  tagTypes: [...],
  endpoints: (builder) => ({
    getSomeData: builder.query<QuoteRes, string>({
      queryFn: (param_id) => {
        // 可根据传入的param_id返回对应模拟数据
        const mockData: QuoteRes = { some_field: `模拟数据_${param_id}` };
        // 必须返回包含data的对象，符合RTK Query的响应格式
        return { data: mockData };
      }
    }),
  })
})

2. 快速切换真实/模拟接口 #

只需要注释/取消注释对应的代码块即可，无需修改组件中的调用逻辑（组件依然使用useGetSomeDataQuery）：

getSomeData: builder.query<QuoteRes, string>({
  // 真实接口写法
  // query: (param_id) => `example/${param_id}`
  
  // 模拟数据写法
  queryFn: (param_id) => {
    const mockData: QuoteRes = { some_field: `模拟数据_${param_id}` };
    return { data: mockData };
  }
}),

3. 进阶：模拟加载/错误状态 #

如果需要更贴近真实场景的模拟，可以添加延迟或返回错误：

queryFn: async (param_id) => {
  // 模拟1秒加载延迟
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 可选：模拟错误场景
  // if (param_id === "error") return { error: { status: 404, data: "Not Found" } };
  
  const mockData: QuoteRes = { some_field: `模拟数据_${param_id}` };
  return { data: mockData };
}

优势总结 #

• 类型安全：依然沿用QuoteRes泛型约束，保证模拟数据和真实接口响应格式一致
• 无侵入：组件调用逻辑完全不变，无需额外修改
• 易切换：仅需修改endpoint内部代码即可在真实/模拟数据间切换
• 灵活性：可根据传入参数返回不同模拟数据，支持模拟各种场景

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