Skip to main content

Pagination
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 children
children
<NodesType>
required

A render prop that includes pagination data and helpers.

Anchor to connection
connection
<NodesType>
required

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.

Anchor to namespace
namespace
string

A namespace for the pagination component to avoid URL param conflicts when using multiple Pagination components on a single page.

Was this section helpful?

Example code

import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
import {useLoaderData, Link} from 'react-router';

export async function loader({request, context: {storefront}}) {
const variables = getPaginationVariables(request, {pageBy: 8});

const data = await storefront.query(ALL_PRODUCTS_QUERY, {
variables,
});

return {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
}
}
}
`;

Anchor to examplesExamples

Other examples using the Pagination component.

Anchor to example-multiple-pagination-components-on-a-single-pageMultiple `Pagination` components on a single page

Anchor to example-exampleExample

Use the namespace prop to differentiate between multiple Pagination components on a single page

Was this section helpful?

Example

import {useLoaderData, Link} from 'react-router';
import {getPaginationVariables, Pagination} from '@shopify/hydrogen';

export async function loader({request, context: {storefront}}) {
const womensPaginationVariables = getPaginationVariables(request, {
pageBy: 2,
namespace: 'womens', // Specify a unique namespace for the pagination parameters
});
const mensPaginationVariables = getPaginationVariables(request, {
pageBy: 2,
namespace: 'mens', // Specify a unique namespace for the pagination parameters
});

const [womensProducts, mensProducts] = await Promise.all([
storefront.query(COLLECTION_PRODUCTS_QUERY, {
variables: {...womensPaginationVariables, handle: 'women'},
}),
storefront.query(COLLECTION_PRODUCTS_QUERY, {
variables: {...mensPaginationVariables, handle: 'men'},
}),
]);

return {womensProducts, mensProducts};
}

export default function Collection() {
const {womensProducts, mensProducts} = useLoaderData();
return (
<div className="collection">
<h1>Womens</h1>

<Pagination
connection={womensProducts?.collection?.products}
// Specify a unique namespace for the pagination links
namespace="womens"
>
{({nodes, isLoading, PreviousLink, NextLink}) => {
return (
<div>
<PreviousLink>
{isLoading ? 'Loading...' : <span>↑ Load previous</span>}
</PreviousLink>
<div>
{nodes.map((product) => (
<div key={product.id}>
<Link to={`/products/${product.handle}`}>
{product.title}
</Link>
</div>
))}
</div>
<NextLink>
{isLoading ? 'Loading...' : <span>Load more ↓</span>}
</NextLink>
</div>
);
}}
</Pagination>

<h1>Mens</h1>
<Pagination
connection={mensProducts?.collection?.products}
// Specify a unique namespace for the pagination links
namespace="mens"
>
{({nodes, isLoading, PreviousLink, NextLink}) => {
return (
<div>
<PreviousLink>
{isLoading ? 'Loading...' : <span>↑ Load previous</span>}
</PreviousLink>
<div>
{nodes.map((product) => (
<div key={product.id}>
<Link to={`/products/${product.handle}`}>
{product.title}
</Link>
</div>
))}
</div>
<NextLink>
{isLoading ? 'Loading...' : <span>Load more ↓</span>}
</NextLink>
</div>
);
}}
</Pagination>
</div>
);
}

const COLLECTION_PRODUCTS_QUERY = `#graphql
query CollectionProducts(
$first: Int
$last: Int
$startCursor: String
$endCursor: String
$handle: String!
) {
collection(handle: $handle) {
products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
nodes {
id
handle
title
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
}
}
}
`;

Anchor to relatedRelated

getPaginationVariables