Help migrate GraphQL query: Unknown argument "after" on field "Query.allPrismicLister"

Developing with Prismic
3

Hello @fcr, thanks for reaching out!

According to Angelo from our DevX team, pagination is done using the limit and skip parameters. The Prismic GraphQL API (used in gatsby-source-prismic-graphql) implements a different pagination strategy using cursors and an after parameter.

Here’s how to convert the query in their question to limit and skip:

module.exports = `
  query loadCategoryCms($lang: String!, $skip: Int!) {
    allPrismicLister(filter: {lang: {eq: $lang}}, skip: $skip, limit: 6) {
      nodes {
        lang
        data {
          field
        }
      }
      pageInfo {
        currentPage
        pageCount
        hasNextPage
        hasPreviousPage
      }
    }
  }
`;

Things to note in the query:

  • The limit parameter defines how many nodes should be included in the query. This can be adjusted to however many nodes should be included.
  • The skip parameter should be passed a number based on the current page. It should use this formula: (pageNum - 1) * limit. For example, page 1 would be 0, page 2 would be 6, page 3 would be 12, etc.
  • The pageInfo field includes helpful data for generating a pagination UI. It includes the current page number, total number of pages, and whether or not the current page has a next page or previous page.

Everything must be done statically at build time. Each paginated query either needs to be its own page (e.g. /blog/page/2) or the queries need to be pre-computed and saved as JSON files at build time (advanced usage). When using gatsby-source-prismic-graphql, it was possible to make client-side queries to Prismic GraphQL API using the same query as the static Gatsby queries. This is not possible with gatsby-source-prismic.