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

Developing with Prismic
1

Hi, all, I'm in the process of migrating old GraphQL queries from gatsby-source-prismic-graphql to gatsby-source-prismic but it's been extremely difficult to find sufficient information to make the process smooth. Of course, I'm checking the official guides from the plugin as well as from Prismic documentation but they don't cover everything.

So far I have been able to find the "conversion rules" through a few different searches but now I am stuck with one in particular that doesn't seem to be documented anywhere!

My case is:

Old query, works with gatsby-source-prismic-graphql:

module.exports = `
  query loadCategoryCms($lang: String!, $after: String!) {
    prismic {
      allListers(lang: $lang, after: $after) {
        edges {
          node {
            // suppressed...
            _meta {
              lang
            }
          }
        }
        totalCount
        pageInfo {
          endCursor
          hasNextPage
        }
      }
    }
  }
`;

New query, as required by gatsby-source-prismic, in the point that I got stuck:

module.exports = `
  query loadCategoryCms($lang: String!, $after: String!) {
    allPrismicLister(filter: {lang: $lang}, after: $after) {
      nodes {
        lang
        data {
          // suppressed...
        }
      }
      // haven't implemented totalCount and pageInfo {...} as well
      // because I'm not sure where they should go either!!!
    }
  }
`;

The problem is with the after argument - when I run the code I get the error: Unknown argument "after" on field "Query.allPrismicLister".

I need this argument because this is part of a pagination logic.

I have not been able to find it anywhere, how the field argument is supposed to be passed in the new query format...

Please help!

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.