useInfiniteQuery expects pageParam to be a number, but my backend returns a complex string cursor

[alwalxed]

Describe the bug

I'm using useInfiniteQuery to handle infinite scrolling in my React application. My backend API returns pagination cursors as base64 encoded strings. However, useInfiniteQuery seems to expect pageParam to be a number, causing issues with the current setup. Here's my current configuration:

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/withered-darkness-s83hdr?file=%2Fsrc%2Fhooks%2FuseData.ts%3A12%2C30

Steps to reproduce

The code works fine in the sandbox but fails to fetch data locally, even though both versions are identical. Locally, I get the following error:

TypeError: pageParam must be a number
    at getStickers (get-stickers.ts:16:11)
    at queryFn (useStickers.tsx:18:53)
    at fetchPage (infiniteQueryBehavior.js:61:30)
    at Object.fetchFn [as fn] (infiniteQueryBehavior.js:82:26)
    at run (retryer.js:92:31)
    at eval (retryer.js:116:11)
    at StickerDisplay

In VSCode, the queryFn is highlighted with the error:

No overload matches this call.
  Type '({ pageParam }: { queryKey: (string | { group: string; })[]; signal: AbortSignal; pageParam: null; direction: FetchDirection; meta: Record<string, unknown> | undefined; }) => Promise<...>' is not assignable to type 'QueryFunction<PaginatedStickers, (string | { group: string; })[], string | null>'.
    Types of parameters '__0' and 'context' are incompatible.
      Type '{ queryKey: (string | { group: string; })[]; signal: AbortSignal; pageParam: string | null; direction: FetchDirection; meta: Record<string, unknown> | undefined; }' is not assignable to type '{ queryKey: (string | { group: string; })[]; signal: AbortSignal; pageParam: null; direction: FetchDirection; meta: Record<string, unknown> | undefined; }'.
        Types of property 'pageParam' are incompatible.
          Type 'string | null' is not assignable to type 'null'.
            Type 'string' is not assignable to type 'null'.

Expected behavior

I expected the pageParam that the queryFn passes to the fetch function to be a string since the backend returns a string as the cursor for the next page

  const {
      data,
      error,
      status,
      fetchNextPage,
      isFetchingNextPage
  } =
  useInfiniteQuery({
      queryKey: ['stickers', {
          group
      }],
      queryFn: ({
          pageParam = null
      }) => getStickers(pageParam, group),
      initialPageParam: null,
      getNextPageParam: (lastPage) => lastPage?.next ?? null,
  });

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Ubuntu. Chrome

Tanstack Query adapter

None

TanStack Query version

v5.36.2

TypeScript version

v5.4

Additional context

No response