Skip to main content

getPaginationVariables

The getPaginationVariables function is used with the <Pagination> component to generate the variables needed to fetch paginated data from the Storefront API. The returned variables should be used within your storefront GraphQL query.

Anchor to getPaginationVariables
getPaginationVariables(
request
,
options
)

Anchor to getPaginationVariables-parametersParameters

Anchor to request
request
Request
required

The request object passed to your Remix loader function.

Anchor to options
options
{ pageBy: number; namespace?: string; }
Default: {pageBy: 20}

Options for how to configure the pagination variables. Includes the ability to change how many nodes are within each page as well as a namespace to avoid URL param conflicts when using multiple Pagination components on a single page.

Examples
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 relatedRelated

Pagination
Was this page helpful?