Paginationcomponent
component
The Storefront API uses cursors to paginate through lists of data and the <Pagination /> component makes it easy to paginate data from the Storefront API. It is important for pagination state to be maintained in the URL, so that the user can navigate to a product and return back to the same scrolled position in a list. It is also important that the list state is shareable via URL. The <Pagination> component provides a render prop with properties to load more elements into your list.
Anchor to propsProps
- Anchor to childrenchildrenPaginationRenderProp<NodesType>required
A render prop that includes pagination data and helpers.
- Anchor to connectionconnectionConnection<NodesType>required
The response from
storefront.queryfor a paginated request. Make sure the query is passed pagination variables and that the query haswith,,, anddefined.
PaginationProps
- children
A render prop that includes pagination data and helpers.
PaginationRenderProp<NodesType> - connection
The response from `storefront.query` for a paginated request. Make sure the query is passed pagination variables and that the query has `pageInfo` with `hasPreviousPage`, `hasNextpage`, `startCursor`, and `endCursor` defined.
Connection<NodesType>
{
/** The response from `storefront.query` for a paginated request. Make sure the query is passed pagination variables and that the query has `pageInfo` with `hasPreviousPage`, `hasNextpage`, `startCursor`, and `endCursor` defined. */
connection: Connection<NodesType>;
/** A render prop that includes pagination data and helpers. */
children: PaginationRenderProp<NodesType>;
}PaginationRenderProp
- contextTypes
ValidationMap<any> | undefined - defaultProps
Partial<P> | undefined - displayName
string | undefined - propTypes
WeakValidationMap<P> | undefined
FC<PaginationInfo<NodesType>>Connection
{
nodes: Array<NodesType>;
pageInfo: PageInfo;
} | {
edges: Array<{
node: NodesType;
}>;
pageInfo: PageInfo;
}Was this section helpful?
Example code
import {json} from '@shopify/remix-oxygen';
import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
import {useLoaderData, Link} from '@remix-run/react';
export async function loader({request, context: {storefront}}) {
const variables = getPaginationVariables(request, {pageBy: 8});
const data = await storefront.query(ALL_PRODUCTS_QUERY, {
variables,
});
return json({products: data.products});
}
export default function List() {
const {products} = useLoaderData();
return (
<Pagination connection={products}>
{({nodes, PreviousLink, NextLink}) => (
<>
<PreviousLink>Previous</PreviousLink>
<div>
{nodes.map((product) => (
<Link key={product.id} to={`/products/${product.handle}`}>
{product.title}
</Link>
))}
</div>
<NextLink>Next</NextLink>
</>
)}
</Pagination>
);
}
const ALL_PRODUCTS_QUERY = `#graphql
query AllProducts(
$country: CountryCode
$language: LanguageCode
$first: Int
$last: Int
$startCursor: String
$endCursor: String
) @inContext(country: $country, language: $language) {
products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
nodes { id
title
handle
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
}
}
`;
examples
Example code
description
I am the default example
JavaScript
import {json} from '@shopify/remix-oxygen'; import {Pagination, getPaginationVariables} from '@shopify/hydrogen'; import {useLoaderData, Link} from '@remix-run/react'; export async function loader({request, context: {storefront}}) { const variables = getPaginationVariables(request, {pageBy: 8}); const data = await storefront.query(ALL_PRODUCTS_QUERY, { variables, }); return json({products: data.products}); } export default function List() { const {products} = useLoaderData(); return ( <Pagination connection={products}> {({nodes, PreviousLink, NextLink}) => ( <> <PreviousLink>Previous</PreviousLink> <div> {nodes.map((product) => ( <Link key={product.id} to={`/products/${product.handle}`}> {product.title} </Link> ))} </div> <NextLink>Next</NextLink> </> )} </Pagination> ); } const ALL_PRODUCTS_QUERY = `#graphql query AllProducts( $country: CountryCode $language: LanguageCode $first: Int $last: Int $startCursor: String $endCursor: String ) @inContext(country: $country, language: $language) { products(first: $first, last: $last, before: $startCursor, after: $endCursor) { nodes { id title handle } pageInfo { hasPreviousPage hasNextPage startCursor endCursor } } } `;TypeScript
import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {Pagination, getPaginationVariables} from '@shopify/hydrogen'; import {useLoaderData, Link} from '@remix-run/react'; import {ProductConnection} from '@shopify/hydrogen/storefront-api-types'; export async function loader({ request, context: {storefront}, }: LoaderFunctionArgs) { const variables = getPaginationVariables(request, {pageBy: 8}); const data = await storefront.query<{products: ProductConnection}>( ALL_PRODUCTS_QUERY, { variables, }, ); return json({products: data.products}); } export default function List() { const {products} = useLoaderData<typeof loader>(); return ( <Pagination connection={products}> {({nodes, NextLink, PreviousLink}) => ( <> <PreviousLink>Previous</PreviousLink> <div> {nodes.map((product) => ( <Link key={product.id} to={`/products/${product.handle}`}> {product.title} </Link> ))} </div> <NextLink>Next</NextLink> </> )} </Pagination> ); } const ALL_PRODUCTS_QUERY = `#graphql query AllProducts( $country: CountryCode $language: LanguageCode $first: Int $last: Int $startCursor: String $endCursor: String ) @inContext(country: $country, language: $language) { products(first: $first, last: $last, before: $startCursor, after: $endCursor) { nodes { id title handle } pageInfo { hasPreviousPage hasNextPage startCursor endCursor } } } `;
