Skip to main content
The usePaginatedLoadAll hook automatically fetches all pages of a paginated query and returns the complete result set.

​
Import

import { usePaginatedLoadAll } from '@well-played.gg/react-sdk';

​
Signature

function usePaginatedLoadAll<TNodeChild, TData, TVariables>(
  query: TypedDocumentNode<TData, TVariables> | TadaDocumentNode<TData, TVariables>,
  options?: {
    variables?: Omit<TVariables, "page">;
    skip?: boolean;
    onResults?: (results: TNodeChild[]) => void;
  }
): {
  results: TNodeChild[];
  loading: boolean;
  refetch: (variables?: Omit<TVariables, "page">) => Promise<TNodeChild[]>;
}
Source: paginated-query.hook.ts:100-169

​
Parameters

​
query
TypedDocumentNode
required
A GraphQL query created with the graphql tagged template. The query must return a paginated result with nodes and pageInfo fields.
​
options
object
Configuration options for the query.

​
Return Value

​
results
TNodeChild[]
Array of all items fetched from all pages.
​
loading
boolean
True while pages are being fetched.
​
refetch
(variables?) => Promise<TNodeChild[]>
Function to refetch all pages with optional new variables.

​
Example

import { usePaginatedLoadAll, graphql } from '@well-played.gg/react-sdk';

const PLAYERS_QUERY = graphql(`
  query players($ids: [ID!]!, $page: PageInfo!) {
    players(ids: $ids, page: $page) {
      nodes {
        id
        username
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
`);

function PlayersList({ playerIds }: { playerIds: string[] }) {
  const { results, loading, refetch } = usePaginatedLoadAll(
    PLAYERS_QUERY,
    {
      variables: { ids: playerIds }
    }
  );

  if (loading) return <div>Loading all players...</div>;

  return (
    <div>
      <ul>
        {results.map(player => (
          <li key={player.id}>{player.username}</li>
        ))}
      </ul>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

​
How It Works

The hook automatically:
  1. Fetches the first page (100 items)
  2. Checks if there are more pages via pageInfo.hasNextPage
  3. Continues fetching subsequent pages using the endCursor
  4. Aggregates all results into a single array
  5. Calls onResults callback when complete

​
Performance Considerations

Use this hook carefully with large datasets. It will fetch all pages sequentially, which can take significant time and bandwidth for large result sets.
For large datasets, consider:
  • Using usePaginatedQuery for manual pagination
  • Implementing virtual scrolling with incremental loading
  • Adding filters to reduce the total result size

​
Error Handling

The hook throws errors that occur during fetching. Wrap components using this hook with an Error Boundary: 
import { ErrorBoundary } from 'react-error-boundary';

function SafePlayersList({ playerIds }: { playerIds: string[] }) {
  return (
    <ErrorBoundary fallback={<div>Failed to load players</div>}>
      <PlayersList playerIds={playerIds} />
    </ErrorBoundary>
  );
}

​
Internal Usage

This hook is used internally by:

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us