React Query 5 中无限查询默认参数的类型问题解析

在 React Query 5 版本中，关于无限查询(useInfiniteQuery)默认参数的类型定义发生了一些变化，这导致了一些开发者在迁移过程中遇到了类型错误问题。

问题背景

在 React Query v4 中，开发者可以像这样为无限查询设置默认参数：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      getNextPageParam: (lastPage: any) => lastPage?.nextCursor ?? undefined,
    },
  },
});

但在 v5 中，这段代码会抛出类型错误，提示 getNextPageParam 不是有效的查询选项。

技术原因

React Query 5 对无限查询的类型系统进行了重构，将无限查询相关的参数(getNextPageParam、initialPageParam等)移到了专门的接口中。这是因为：

1. 这些参数对于无限查询是必需的
2. 它们对类型推断至关重要
3. 团队希望保持类型系统的严谨性

解决方案

虽然不能在 QueryClient 的默认选项中设置这些参数，但有几种替代方案：

1. 使用共享配置对象

const infiniteDefaults = {
  getNextPageParam: (lastPage: any) => lastPage?.nextCursor ?? undefined,
  initialPageParam: 0 // 必须同时提供初始页参数
} as const;

// 使用时
useInfiniteQuery({
  queryKey,
  queryFn,
  ...infiniteDefaults
});

2. 创建自定义 Hook

function useCustomInfiniteQuery(options) {
  return useInfiniteQuery({
    getNextPageParam: (lastPage) => lastPage?.nextCursor ?? undefined,
    initialPageParam: 0,
    ...options
  });
}

最佳实践建议

1. 为每个无限查询显式提供 getNextPageParam 和 initialPageParam
2. 如果多个查询使用相同逻辑，考虑创建可复用的配置对象或自定义 Hook
3. 避免使用 any 类型，尽可能为 lastPage 定义具体类型

总结

React Query 5 通过更严格的类型系统提高了代码的可靠性，虽然这带来了一些迁移成本，但最终会带来更好的开发体验。理解这些变化背后的设计理念，有助于开发者更好地利用这个强大的数据获取库。