Choose a version:

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 (

{({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

Pagination

Was this page helpful?

Anchor to getPaginationVariablesgetPaginationVariables(requestrequest,optionsoptions)

Anchor to getPaginationVariables-parametersParameters

Anchor to RelatedRelated

Anchor to getPaginationVariables
getPaginationVariables(
request
,
options
)