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 the pagination your blueprint must not be unique

The use the forward Pagination we need to pass two keywords to the all query of your blueprint.

• first : Responsible for the retuned chuck size

• after : Responsible for the starting point cursor

Curser: arbitrary ID or Hash value that the server can resolve to a document

Lets say we define first with 50 and we do not specify the after curser for now

This will be conclude that we fetch the next 50 documents of our blueprint which 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. Further the pageInfo.hasNextPage is telling us, if there is a next page to query, or if we are at the end of our dataset.

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

This will be conclude that we fetch the next 50 documents of our blueprint which follow after last document from before.

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

And thats 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 very much the same expect you need to use diffrent keywords on the all query of your blueprint.

• last : Responsible for the retuned chuck size

• before : Responsible for the end point curser

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

This will be conclude that we fetch the last X documents of our blueprint which are before a specific position