react-query useInfiniteQuery and paginated queries

[grez72]

Is it possible to use convexQuery with tanstack useInfiniteQuery and a paginated convex query?

I have infinite scroll working with the following react-query / convex integration, but it does not subscribe to changes when hooked up this way. (Note that I'm using react-query here so that I can leverage it's caching capabilities when navigating between nextjs routes, allowing me to "restore scroll position" on an infinite scroll page without having to refetch data).

const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
    queryKey: ['entries'],
    queryFn: async ({ pageParam = 1 }) => {
      const numItems = 10;
      const currentCursor = pageParam === 1 ? null : data?.pages[data.pages.length - 1]?.continueCursor;
      return convex.query(api.feed.getUserFeed, {
        paginationOpts: { numItems: numItems, cursor: currentCursor },
      });
    },
    getNextPageParam: (lastPage, allPages) => {
      return (lastPage.isDone===true) ? undefined : allPages.length + 1;
    }
  });  

From the Demo in the Docs it wasn't clear to me whether you can just drop-in useInfiniteQuery here, and if so, how to handle the cursor logic.

example from docs:

import { useQuery } from "@tanstack/react-query";
import { convexQuery } from "@convex-dev/convex-react-query";
import { api } from "../convex/_generated/api";

export function App() {
  const { data, isPending, error } = useQuery(
    convexQuery(api.functions.myQuery, { id: 123 }),
  );
  return isPending ? "Loading..." : data;
}

[messabih-khalil]

did u found any solution

[thomasballinger]

The suggested approach is to use useConvexPaginatedQuery,, a re-exported version of usePaginatedQuery from the convex package, for reactive pagination.

Pagination works a bit differently in TanStack Query, the direction I'd like to take is to improve convex's usePaginatedQuery hook to stay subscribed / keep the paginated query around, but that's a significant change because currently the state for the paginated query is stored in the React hook.

Making useInfiniteQuery work is also an option but the interfaces dont' mesh naturally, if it is supported it will likely look like what you've done here, something non-reactive.

[NexWasTaken]

The suggested approach is to use useConvexPaginatedQuery,, a re-exported version of usePaginatedQuery from the convex package, for reactive pagination.

Pagination works a bit differently in TanStack Query, the direction I'd like to take is to improve convex's usePaginatedQuery hook to stay subscribed / keep the paginated query around, but that's a significant change because currently the state for the paginated query is stored in the React hook.

Making useInfiniteQuery work is also an option but the interfaces dont' mesh naturally, if it is supported it will likely look like what you've done here, something non-reactive.

Hey, can you share a code snippet on how to use pagination while keeping the reactivity intact?

[thomasballinger]

useConvexPaginatedQuery (the usePaginatedQuery described here) is reactive!