Pagination

Our graphql API is following the relay specifications for pagination. To read in detail about the spec, see here

Note: In order to use pagination, your blueprint must not be set as unique.

The use of forward pagination requires passing two keywords to the all query of your blueprint.

• first : Responsible for the retuned chuck size

• after : Responsible for the starting point cursor

Cursor: An arbitrary ID or hash value that the server can use to resolve to a document.

Let's say we define the query first with 50 and we don't specify the after cursor for now.

This will fetch the next 50 documents of our blueprint, whose IDs are below d61aa8b9-6a86-4ec1-9c30-59a43942da30

Here is an example query:

{
  allPage(first: 50) {
    pageInfo{
      endCursor
      hasNextPage
    }
    edges {
      node {
        id
        slug
        title
      }
    }
  }
}

Assuming we retrieve eyJzb3J0IjpbIjIwMjItMDgtMTZUMDg6Mjg6NDguODA1WiIsIjAxZThkZDU2LThiMGYtNDNjYy1hOGRlLTM5ODU2NzY4NmEzZCJdfQ== as the endCurser we can use this as the after in our query for the next chunk of documents. Furthermore, the pageInfo.hasNextPage tells us if there is a next page to query or if we have reached the end of our dataset.

Let's say we want to get the next 50 documents of the blueprint Page. We again define first with 50 and use the endCursor as our after parameter.

This will result in us fetching the next 50 documents of our blueprint that come after the last document from the previous query.

{
  allPage(
    first: 50
    after: "eyJzb3J0IjpbIjIwMjItMDgtMTZUMDg6Mjg6NDguODA1WiIsIjAxZThkZDU2LThiMGYtNDNjYy1hOGRlLTM5ODU2NzY4NmEzZCJdfQ=="
  ) {
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      node {
        id
        slug
        title
      }
    }
  }
}

And that's how you do forward pagination in the External API 🎉

import { gql } from "@apollo/client";
import { client } from "../../utils/gql/client";

const allPageQuery = gql`
  query allPage($after: String) {
    allPage(first: 50, after: $after) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          id
          slug
          title
        }
      }
    }
  }
`;

export const getAllPages = async ({ after, pages = [] }) => {
  // using apollo client here, with other clients the object path might differ 

  const { data } = await client.query({
    query: allPageQuery,
    variables: {
      after,
    },
  });

  data.allPage.edges.forEach((edge) => {
    pages.push(edge.node);
  });

  if (data?.allPage?.pageInfo?.hasNextPage) {
    return await getAllPages({
      pages,
      after: data?.allPage?.pageInfo?.endCursor,
    });
  }

  return pages;
};

The backward pagination works similarly, but you need to use different keywords in the all query of your blueprint.

• last : Responsible for the retuned chuck size

• before : Responsible for the endpoint curser

• hasPreviousPage: Will give you information if there is another page to query in the backward direction

• 
  

This will result in us fetching the last X documents of our blueprint, which are before a specific position.