RFC: Request to add useInfiniteQuery hook just like one on react-query

[schang124]

Summary

• The infinite scroll example on the doucment is one of great way to apply infinte query, but if you can provide such api useInfiniteQuery on react-query that would be really convenient!
• The advantage for this hook would be:
  • Do not need page control with useState and it is included with the hook.
  • Supports both previous and next pagination.
  • Much convenient access and manipulation to list data, if needed.

Proposed Solution

import React from 'react';
import { useInfiniteQuery, gql } from 'urql';

const PageQuery = gql`
  query Page($first: Int!, $after: String) {
    todos(first: $first, after: $after) {
      nodes {
        id
        name
      }
      pageInfo {
        hasPrevPage
        hasNextPage
        prevCursor
        nextCursor
      }
    }
  }
`;

const SearchResultPage = ({ variables, isLastPage, isFirstPage, onLoadMore }) => {
  const [{ 
    data, 
    fetching, 
    fetchNextPage,
    fetchPreviousPage, 
    error 
  }] = useInfiniteQuery({ 
    query: PageQuery, 
    variables ,
    initialPageParam: 1,
    ...options,
    getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
      firstPage.prevCursor,
    getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
      lastPage.nextCursor,
  });
  
  const todos = data?.pages.map((page) => page.todos).flat();

  return (
    <div>
      {error && <p>Oh no... {error.message}</p>}x
      {fetching && <p>Loading...</p>}
      {todos && (
        <>
          {isFirstPage && todos.pageInfo.hasPrevPage && (
            <button onClick={fetchPreviousPage}>load prev</button>
          )}
          {todos.nodes.map(todo => (
            <div key={todo.id}>
              {todo.id}: {todo.name}
            </div>
          ))}
          {isLastPage && todos.pageInfo.hasNextPage && (
            <button onClick={fetchNextPage}>load next</button>
          )}
        </>
      )}
    </div>
  );
};

Requirements