传递React Infinite Query数据作为Props时的类型定义问题

方案1：直接传递useInfiniteQuery完整返回结果 #

利用React Query内置的UseInfiniteQueryResult泛型类型，直接将查询结果对象作为Props传递给子组件，无需手动逐个定义类型：

父组件代码

import { useInfiniteQuery } from '@tanstack/react-query';

// 定义分页数据的业务类型
type Item = { id: number; name: string };
type ItemPage = { items: Item[]; nextPage: number | undefined };

const ItemList = () => {
  const queryResult = useInfiniteQuery({
    queryKey: ['items'],
    queryFn: async ({ pageParam = 0 }) => {
      const res = await fetch(`/api/items?page=${pageParam}`);
      return res.json() as Promise<ItemPage>;
    },
    getNextPageParam: (lastPage) => lastPage.nextPage,
  });

  return (
    <div>
      {/* 列表渲染逻辑 */}
      {queryResult.data?.pages.flatMap(page => page.items).map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      
      <NextPageButton queryResult={queryResult} />
    </div>
  );
};

子组件（下一页按钮）代码

import { UseInfiniteQueryResult } from '@tanstack/react-query';
import { ItemPage } from './ItemList';

type NextPageButtonProps = {
  queryResult: UseInfiniteQueryResult<ItemPage, Error>;
};

export const NextPageButton = ({ queryResult }: NextPageButtonProps) => {
  const { fetchNextPage, hasNextPage, isFetchingNextPage } = queryResult;

  return (
    <button
      onClick={() => fetchNextPage()}
      disabled={!hasNextPage || isFetchingNextPage}
      style={{ marginTop: '16px' }}
    >
      {isFetchingNextPage 
        ? '加载中...' 
        : hasNextPage 
          ? '下一页' 
          : '已加载全部'}
    </button>
  );
};

方案2：按需挑选所需属性（避免传递冗余数据） #

如果不想传递完整的查询结果，可通过TypeScript的Pick工具类型，从UseInfiniteQueryResult中提取仅需的字段：

import { UseInfiniteQueryResult } from '@tanstack/react-query';
import { ItemPage } from './ItemList';

type NextPageButtonProps = Pick<
  UseInfiniteQueryResult<ItemPage, Error>,
  'fetchNextPage' | 'hasNextPage' | 'isFetchingNextPage'
>;

export const NextPageButton = ({ fetchNextPage, hasNextPage, isFetchingNextPage }: NextPageButtonProps) => {
  // 组件逻辑同上
};

方案3：提取父组件已推导的类型 #

若父组件中useInfiniteQuery的返回类型已自动推导完成，可直接通过typeof提取该类型并复用：

父组件中导出类型

// 在ItemList组件中导出查询结果的类型
export type ItemQueryResult = typeof queryResult;

子组件中使用

import { ItemQueryResult } from './ItemList';

type NextPageButtonProps = {
  queryResult: ItemQueryResult;
};

export const NextPageButton = ({ queryResult }: NextPageButtonProps) => {
  // 组件逻辑同上
};

以上三种方案都能避免手动重复定义React Query相关变量的类型，保证类型一致性的同时减少代码冗余。

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