Tags
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
Tags