Trouble with Type Inference for useInfiniteQuery in TanStack Query v5

[JuhwanLeeKR]

Hello everyone,

I've encountered an issue with type inference when using useInfiniteQuery from TanStack Query v5 in a TypeScript project. Despite explicitly typing the return of my custom hook, the TypeScript compiler does not infer the expected UseInfiniteQueryResult type. Here's a simplified version of my hook:

export const useReviewBoardReadListInfiniteQuery = (
  params?: ReviewBoardParams,
  config?: UseInfiniteQueryOptions<ServerPaginationData<ReviewBoardResponse[]>>
): UseInfiniteQueryResult<ServerPaginationData<ReviewBoardResponse[]>> => {
  const fetchFn = async ({
    pageParam = 0,
  }): Promise<ServerPaginationData<ReviewBoardResponse[]>> => {
    // Fetch logic...
  };

  return useInfiniteQuery({
    queryKey: ['reviewBoardReadListInfinite', params],
    queryFn: ({ pageParam }) => fetchFn({ pageParam }),
    initialPageParam: 0,
    // Additional configuration...
    ...config,
  });
};

When using this hook in a component, I intended for the data property to be inferred as ServerPaginationData<ReviewBoardResponse[]> | undefined, but instead, TypeScript infers it as UseInfiniteQueryResult<ServerPaginationData<ReviewBoardResponse[]>, Error>, which seems to miss aligning with the explicit return type I provided.

Here's how I use the hook:

const { data, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useReviewBoardReadListInfiniteQuery({
  limit: 15,
  isPublished: true,
});

And the error I'm seeing is related to accessing data.pages, where TypeScript doesn't recognize pages as part of data.

I've checked my types and configurations against the documentation but can't seem to pinpoint the issue. Has anyone faced a similar problem or can offer insight into what I might be doing wrong? Any suggestions on how to ensure the correct type inference for useInfiniteQuery would be greatly appreciated.

• TypeScript is showing an error, yet in reality, the code functions correctly.

Thank you in advance for your help!

[JuhwanLeeKR]

The following code does work, but it seems like I might be using it incorrectly. I would appreciate any help:

...
const { data, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useReviewBoardReadListInfiniteQuery({
    limit: 15,
    isPublished: true,
  })

  const reviews = (data as unknown as InfiniteData<ServerPaginationData<ReviewBoardResponse[]>>)?.pages
    .map((page) => page?.items)
    .flat()
...

[TkDodo]

show a typescript playground please

[JuhwanLeeKR]

This is my code that I simply created with StackBlitz. 🫡
https://stackblitz.com/edit/stackblitz-starters-lavkw3?file=app%2Fpage.tsx

{
...
  "dependencies": {
    ...
    "@tanstack/react-query": "5.25",
    "next": "14.1",
    "typescript": "^5",
    "@types/node": "18.17"
    ...
  }
}

[TkDodo]

everything is easier if you don't spread ...config. You'd need to set all type parameters on UseInfiniteQueryOptions

playground

[JuhwanLeeKR]

Thank you It was a great help 👍