Choose a version:

Pagination

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.

PaginationRenderProp

contextTypes
```
ValidationMap<any> | undefined
```
defaultProps
Used to define default values for the props accepted by the component.
```
Partial<P> | undefined
```
displayName
Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
```
string | undefined
```
propTypes
Used to declare the types of the props accepted by the component. These types will be checked during rendering and in development only. We recommend using TypeScript instead of checking prop types at runtime.
```
WeakValidationMap<P> | undefined
```

Connection

{
      nodes: Array<NodesType>;
      pageInfo: PageInfo;
    } | {
      edges: Array<{
        node: NodesType;
      }>;
      pageInfo: PageInfo;
    }

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 (

{({nodes, PreviousLink, NextLink}) => (

<PreviousLink>Previous</PreviousLink>

<div>

{nodes.map((product) => (

{product.title}

</Link>

))}

</div>

</>

)}

</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

JavaScript

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

TypeScript

import {type LoaderFunctionArgs} from 'react-router';
import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
import {useLoaderData, Link} from 'react-router';
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 {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
      }
    }
  }
`;

Anchor to RelatedRelated

getPaginationVariables

Was this page helpful?