The usePaginatedQuery hook fetches paginated data from the WellPlayed API and provides methods to manually load additional pages.
Import
import { usePaginatedQuery } from '@well-played.gg/react-sdk';
Signature
function usePaginatedQuery<TNodeChild, TData, TVariables>(
query: TypedDocumentNode<TData, TVariables> | TadaDocumentNode<TData, TVariables>,
options?: {
variables?: Omit<TVariables, "page">;
skip?: boolean;
onResults?: (results: TNodeChild[]) => void;
pageSize?: number;
}
): {
data: TData | undefined;
loading: boolean;
loadNextPage: (variables?: Omit<TVariables, "page">) => Promise<void>;
loadNextPageWithoutAppendingOldData: (variables?: Omit<TVariables, "page">) => Promise<void>;
}
paginated-query.hook.ts:17-84
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.
Configuration options for the query.
Query variables (excluding the page parameter which is handled automatically).
If true, the query will not be executed.
onResults
(results: TNodeChild[]) => void
Callback function invoked when results are loaded.
Number of items to fetch per page.
Return Value
The current page of query results.
True while the query is in flight.
loadNextPage
(variables?) => Promise<void>
Loads the next page and refetches all data. Only loads if there is a next page available.
loadNextPageWithoutAppendingOldData
(variables?) => Promise<void>
Loads the next page using fetchMore, which appends results to the existing data in the Apollo cache.
Example
import { usePaginatedQuery, graphql } from '@well-played.gg/react-sdk';
const TEAMS_QUERY = graphql(`
query teams($tournamentId: ID!, $page: PageInfo!) {
tournamentTeams(tournamentId: $tournamentId, page: $page) {
nodes {
id
name
}
pageInfo {
endCursor
hasNextPage
}
}
}
`);
function TeamsList({ tournamentId }: { tournamentId: string }) {
const { data, loading, loadNextPage } = usePaginatedQuery(
TEAMS_QUERY,
{
variables: { tournamentId },
pageSize: 50
}
);
if (loading) return <div>Loading...</div>;
const teams = data?.tournamentTeams.nodes ?? [];
const hasMore = data?.tournamentTeams.pageInfo.hasNextPage ?? false;
return (
<div>
<ul>
{teams.map(team => (
<li key={team.id}>{team.name}</li>
))}
</ul>
{hasMore && (
<button onClick={() => loadNextPage()}>
Load More
</button>
)}
</div>
);
}
Notes
- The hook automatically manages the
page parameter with first and after cursors
- Use
loadNextPage for replacing all data with a fresh refetch
- Use
loadNextPageWithoutAppendingOldData to append pages in the Apollo cache
- For automatic pagination that fetches all pages, use usePaginatedLoadAll
See Also