If you are struggling to implement pagination in GraphQL using the Lighthouse framework then this article might help you.
When I started following Lighthouse Tutorial it was easy to query data as per the document mentioned in the tutorial. You might check my previous article to set up GraphQL using Lighthouse.
The query in the schema.graphql file is like below.
type Query {
users: [User!]! @paginate(defaultCount: 10)
user(id: ID @eq): User @find
posts: [Post!]! @all
post(id: Int! @eq): Post @find
}Ex, if you want to fetch all the posts and related information the query looks like below:
{
posts {
id
title
author {
name
}
comments {
id
reply
}
}
}Output of the above query is:
{
"data": {
"posts": [
{
"id": "1",
"title": "Dr.",
"author": {
"name": "Lexie Kohler"
},
"comments": []
},
{
"id": "2",
"title": "Mrs.",
"author": {
"name": "Dr. Brock Bergstrom Sr."
},
"comments": []
},
....
]
}
}Then I tried to apply pagination for posts data by adding the directive @paginate(defaultCount: 10)
type Query {
users: [User!]! @paginate(defaultCount: 10)
user(id: ID @eq): User @find
posts: [Post!]! @paginate(defaultCount: 10)
post(id: Int! @eq): Post @find
}I tried to query the data like below.
{
posts(first:10, page:1) {
id
title
author {
name
}
comments {
id
reply
}
}
}I got error
{
"errors": [
{
"message": "Cannot query field \"id\" on type \"PostPaginator\".",
"extensions": {
"category": "graphql"
},
"locations": [
{
"line": 3,
"column": 5
}
]
},
{
"message": "Cannot query field \"title\" on type \"PostPaginator\".",
"extensions": {
"category": "graphql"
},
"locations": [
{
"line": 4,
"column": 5
}
]
},
....
]
}I thoroughly checked their API Reference Doc and tried to go through other articles and found how to query the data for pagination.
Solution
{
posts(first:2) {
data {
id
title
author {
name
}
comments {
id
reply
}
}
paginatorInfo {
currentPage
lastPage
}
}
}Output
{
"data": {
"posts": {
"data": [
{
"id": "1",
"title": "Dr.",
"author": {
"name": "Lexie Kohler"
},
"comments": []
},
{
"id": "2",
"title": "Mrs.",
"author": {
"name": "Dr. Brock Bergstrom Sr."
},
"comments": []
}
],
"paginatorInfo": {
"currentPage": 1,
"lastPage": 10
}
}
}
}It was very interesting to find this solution 🙂
