Fetching next pages using fetchInfiniteQuery

[Klaasvaak]

I'm rewriting some library "X" from mobx to react-query and integrating this in a large codebase "Y".

Due to the complexity of the large codebase "Y" I would prefer to not refactor all the code of "Y". Therefore I'm trying out some kind of bridge, using a mobx store that will fetch queries. I got some basic things working and found out some things about fetchInfiniteQuery already. Like the queryFn won't have the argument client defined, which is does have when using useInfiniteQuery. This can be solved by wrapping the query, calling queryFn with the client myself. This seems to work.

I'm however, very confused on how to fetch next pages. First, I thought this might be solved by passing in the pageParam just like I used to do for client. But this doesn't seem to work. Is there any documentation available for these cases?

Before calling fetchInfiniteQuery I run the query through this function:

function bindArgsToQueryFn<TData, TError, TPageParam>(
    queryClient: QueryClient,
    pageParam: string,
    queryConfig: UseInfiniteQueryOptions<TData, TError, TData, TPageParam>
): UseInfiniteQueryOptions<TData, TError, TData, TPageParam> {
    return {
        ...queryConfig,
        queryFn: async args => {
            // Call the original queryFn with the client parameter bound
            if (typeof queryConfig.queryFn === "function") {
                return await queryConfig.queryFn({
                    ...args,
                    client: queryClient,
                    pageParam
                } as any); // Type assertion needed because client is not in the standard type
            }
            throw new Error("queryFn is not a function");
        }
    };
}

Example:

const boundQuery = bindArgsToQueryFn(this.queryClient, "", myQuery);

await this.queryClient.fetchInfiniteQuery(boundQuery);


//...later

const boundQuery = bindArgsToQueryFn(this.queryClient, offset, myQuery); // include offset

await this.queryClient.fetchInfiniteQuery(boundQuery);

The problem here is that the second page is not fetched, I don't see a network request and I don't see any error/warning.

[Klaasvaak]

After a closer look, I think I'm using the wrong functions. InfiniteQueryObserver seems to be what I was looking for.

I do notice I still need to bind the queryClient to the queryFn somehow. I don't need to bind the offset anymore because InfiniteQueryObserver takes care of this. Not sure if it's a bug where the client argument is undefined in the queryFn if I don't bind it myself.

[TkDodo]

it shouldn’t be undefined. please show a reproduction 🙏

[Klaasvaak]

Hmm, I'm unable to reproduce this in a stackblitz