TanStack Query 中无限查询的类型推断问题解析

问题现象

在使用 TanStack Query 的 useInfiniteQuery 钩子时，开发者发现了一个有趣的现象：当 getNextPageParam 函数定义在 queryFn 之前时，TypeScript 无法正确推断 lastPage 参数的类型，会将其推断为 unknown 类型。

问题复现

让我们看两个代码示例：

正常工作的示例：

useInfiniteQuery({
  queryKey: ["data"],
  initialPageParam: 1,
  queryFn: ({ pageParam }) => getData(pageParam),
  getNextPageParam: (lastPage) =>
    lastPage.hasNext ? lastPage.page + 1 : undefined,
});

类型推断失败的示例：

useInfiniteQuery({
  queryKey: ["data"],
  initialPageParam: 1,
  getNextPageParam: (lastPage) =>
    lastPage.hasNext ? lastPage.page + 1 : undefined,
  queryFn: ({ pageParam }) => getData(pageParam),
});

在第二个示例中，lastPage 被错误地推断为 unknown 类型，导致无法访问 hasNext 和 page 属性。

技术背景

这个问题源于 TypeScript 的类型推断机制。TypeScript 在进行类型推断时，会按照代码中出现的顺序进行处理。当 getNextPageParam 定义在 queryFn 之前时，TypeScript 还没有获取到 queryFn 的返回类型信息，因此无法正确推断 lastPage 的类型。

解决方案

目前推荐的解决方案是：

1. 调整属性顺序：始终将 queryFn 定义在 getNextPageParam 之前，这样 TypeScript 就能正确推断类型。

2. 使用类型断言：如果必须保持现有顺序，可以显式指定 lastPage 的类型：

getNextPageParam: (lastPage: { hasNext: boolean; page: number }) =>
  lastPage.hasNext ? lastPage.page + 1 : undefined,

最佳实践

为了避免这类问题，建议开发者：

1. 遵循 TanStack Query 推荐的属性顺序规范
2. 在团队中建立一致的代码风格
3. 使用 TypeScript 的严格模式，尽早发现类型问题
4. 考虑使用 ESLint 规则来强制执行正确的属性顺序

总结

虽然这个问题看起来像是 TanStack Query 的缺陷，但实际上它反映了 TypeScript 类型系统的一些限制。理解这些限制有助于开发者编写更健壮的类型安全代码。通过遵循推荐的编码模式，可以避免大多数类型推断问题，确保开发体验的流畅性。