usePonderInfiniteQuery() with built-in pagination

[kyscott18]

Problem / use case

Ponder's GraphQL interface provides a convenient method for paginating, but nothing exists like this in @ponder/client or @ponder/react.

This feature is useful for many frontend applications that have large underlying tables they are trying to display without querying the full result set.

Proposed solution

Luckily, React Query already has a popular, easy-to-use pattern for solving this problem. useInfiniteQuery() allows for querying data in pages and programmatically fetching new pages in bi-directional manner. This can be combined with dynamic query building to automatically apply cursor pagination.

const { data, hasNextPage, fetchNextPage, }) = usePonderInfiniteQuery({
  queryFn: (db) => db.select().from(schema.account),
  limit: 100,
});