createInfiniteQuery expects pageParam to be a number

[bardonadam]

Basically same problem as here TanStack/query#7458, ReactQuery can work with a non number pageParam. Looks like this is not supported in the react-query-kit yet.

What I'm trying to achieve - the API I'm working with returns complex cursor that looks like this:

"next": [
    "1651185545000",
    "53671934072718793"
]

[liaoliao666]

This is a minimal example, and indeed pageParam will be the type of the initialPageParam you pass in.

const useGeneratedQuery = createInfiniteQuery({
  queryKey: ['key'],
  fetcher: (
    _variables: {
      id: number
    },
    { pageParam }
  ): Promise<{
    projects: { id: string; name: string }[]
    nextCursor: string
  }> => {
    return fetch(`/test?cursor=${pageParam}`).then(res => res.json())
  },
  initialPageParam: '1',
  getNextPageParam: lastPage => lastPage.nextCursor,
})

[bardonadam]

Hey, thanks for looking into this! Using your example, I rewrote my query like so:

type Response = FiltersResponse<Array<Subscriber>>;

type SubscribersVariables = {
  id?: string;
  status?: Subscriber.Status;
  search: string | null;
};

export const useSubscribers = createInfiniteQuery({
  queryKey: [
    "subscribers",
    (variables: SubscribersVariables) => ({
      status: variables.status ?? Subscriber.Status.All,
      search: variables.search,
    }),
  ],
  fetcher: (
    variables: SubscribersVariables,
    { pageParam }
  ): Promise<Response> => {
    const { id, status, search } = variables;

    console.log("pageParam", pageParam);

    var url = `/api/filters?status=${status ?? Subscriber.Status.All}&limit=25`;

    if (search && search.length > 0) {
      url += `&filter[keyword]=${search.toLowerCase()}`;
    }

    if (pageParam && pageParam?.length > 0) {
      url += `&after[]=${pageParam[0]}`;
      url += `&after[]=${pageParam[1]}`;
    }

    return axiosInstance.post(url).then((response) => response.data);
  },
  initialPageParam: undefined as string[] | undefined,
  getNextPageParam: (lastPage) => {
    if (lastPage.meta?.next) {
      console.log("last page meta", lastPage.meta.next);

      return lastPage.meta.next;
    }
    return undefined;
  },
});

And compiler no longer complains about initialPageParam & getNextPageParam not returning a number, so there's a progress. However the pageParam is always undefined, even though in the logs I'm getting this:

last page meta ["1695842105000", "100497731293808162"]

Any ideas?