How to type response from useInfiniteQuery QueryFn?

在使用 useInfiniteQuery 从 react-query 库中获取数据时，适当地为 QueryFn 响应类型建模非常关键。这样可以确保你的应用程序能够类型安全地处理数据，并且能更好地与 TypeScript 集成。

基本步骤：

1. 定义响应数据的类型： 在 TypeScript 中，首先需要定义一个接口或类型，该接口或类型详细描述了 QueryFn 函数的预期响应结构。

2. 应用这个类型到 useInfiniteQuery： 使用泛型参数将这个类型应用到 useInfiniteQuery，确保响应数据遵循定义的类型。

例子：

假设我们正在从一个 API 获取一串文章数据，每个文章对象包含 id, title, 和 author 属性。我们可以如下定义 TypeScript 接口：

typescript
interface Article {
  id: number;
  title: string;
  author: string;
}

interface ArticlesResponse {
  page: number;
  articles: Article[];
}

然后我们可以定义一个获取这些文章的异步函数，该函数接受当前页码作为参数：

typescript
async function fetchArticles(pageParam: number): Promise<ArticlesResponse> {
  const response = await fetch(`https://api.example.com/articles?page=${pageParam}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

最后，我们使用 useInfiniteQuery 并指定 ArticlesResponse 类型：

typescript
import { useInfiniteQuery } from 'react-query';

function useInfiniteArticles() {
  return useInfiniteQuery<ArticlesResponse, Error>({
    queryKey: ['articles'],
    queryFn: ({ pageParam = 1 }) => fetchArticles(pageParam),
    getNextPageParam: (lastPage, allPages) => lastPage.page + 1
  });
}

在这个例子中，我们清楚地定义了每个部分的类型，从 API 响应的数据结构（ArticlesResponse）到异步函数（fetchArticles）和最终的 useInfiniteQuery 调用。这样，你的代码不仅具有更好的可维护性，而且能够利用 TypeScript 提供的类型检查和自动补全功能，从而减少运行时错误。