RTK Query含动态timestamp参数的API调用失败后持续重试致崩溃问题

你把动态生成的timestamp直接拼在查询字符串里作为queryKey，这是核心问题。RTK Query是通过queryKey来识别请求唯一性的，每次渲染时timestamp都会变化，RTK就会把它当成全新的请求——之前设置的重试、跳过规则只对单个请求生效，但新请求会不断生成，最终导致无限发起请求直至应用崩溃。

核心思路是把动态参数从queryKey的字符串中抽离，改用结构化的queryKey，同时将timestamp作为查询参数传递给API，让RTK正确识别请求归属。

1. 修正API端点定义 #

在创建RTK Query的slice时，让endpoint接收参数对象，把timestamp作为对象属性传入：

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

export const exampleApi = createApi({
  reducerPath: 'exampleApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/api/' }),
  endpoints: (builder) => ({
    fetchData: builder.query({
      query: (params) => ({
        url: 'example',
        params: { timestamp: params.timestamp }
      }),
    }),
  }),
});

export const { useFetchDataQuery } = exampleApi;

2. 正确调用hook #

用结构化对象作为queryKey，同时配置重试规则避免无限请求：

const timestamp = dayjs().unix() * 1000;

const { data, error, isLoading } = useFetchDataQuery(
  { timestamp },
  {
    // 设置最大重试次数，比如3次后停止
    retry: 3,
    // 也可以直接关闭自动重试
    // retry: false
  }
);

3. 额外优化：减少不必要的请求触发 #

如果timestamp不需要每次渲染都更新，用useMemo缓存它，避免无意义的请求：

// 仅在组件挂载时生成一次timestamp
const timestamp = useMemo(() => dayjs().unix() * 1000, []);

// 或者根据特定依赖更新，比如每30秒刷新一次
const timestamp = useMemo(() => dayjs().unix() * 1000, [refreshTrigger]);

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