How to implement a custom pagination GraphQL query?

[hdodov]

I want to implement the following pagination component in my site:

It makes sense to me to provide the data for this component in Payload because I think that links should be treated as content. Users can add redirects, specify canonical URLs, add categories… Handling all of that on the frontend seems inadequate, so I want to handle it on the backend, where all of that is managed.

I've added a custom GraphQL query as per the Payload GraphQL docs:

interface Item {
    type: "link" | "separator";
    url?: string;
    active?: boolean;
}

function paginate(/* ... */): Item[] {
    // Returns the list of pagination "breadcrumbs" that
    // should be rendered on the frontend.
}

export default buildConfig({
    // ...
    graphQL: {
        queries: (graphql, payload) => ({
            Pagination: {
                type: new graphql.GraphQLList(
                    new graphql.GraphQLObjectType({
                        name: "PaginationItem",
                        fields: {
                            type: {
                                type: graphql.GraphQLString,
                            },
                            url: {
                                type: graphql.GraphQLString,
                            },
                            active: {
                                type: graphql.GraphQLBoolean,
                            },
                        },
                    })
                ),
                args: {
                    collection: {
                        type: graphql.GraphQLString,
                    },
                    limit: {
                        type: graphql.GraphQLInt,
                    },
                    page: {
                        type: graphql.GraphQLInt,
                    },
                    items: {
                        type: graphql.GraphQLInt,
                    },
                },
                resolve: async (obj, args, context, info) => {
                    const { collection, limit, page, items } = args;
                    const result = await payload.find({
                        collection,
                        limit,
                        page,
                    });

                    return paginate({
                        firstPage: 1,
                        lastPage: result.totalPages,
                        currentPage: result.page,
                        totalItems: items,
                        urlResolver: (page) => `https://example.com/blog/${page}`,
                    });
                },
            },
        }),
    },
});

Then, I can use that query like so:

{
    # Perform my regular posts query:
    BlogPosts(limit: 16, page: 4) {
        docs {
            title
        }
    }
    # Perform the additional, custom pagination query:
    Pagination(limit: 16, page: 4, collection: "blog-posts", items: 6) {
        type
        url
        active
    }
}

…and get the following result:

{
  "data": {
    "BlogPosts": {
      "docs": [
        {
          "title": "Lorem ipsum..."
        },
        {
          "title": "Dolor sit amet..."
        },
        // ...
      ]
    },
    "Pagination": [
      {
        "type": "link",
        "url": "https://example.com/blog/1",
        "active": null
      },
      {
        "type": "link",
        "url": "https://example.com/blog/2",
        "active": null
      },
      {
        "type": "link",
        "url": "https://example.com/blog/3",
        "active": null
      },
      {
        "type": "link",
        "url": "https://example.com/blog/4",
        "active": true
      },
      {
        "type": "link",
        "url": "https://example.com/blog/5",
        "active": null
      },
      {
        "type": "separator",
        "url": null,
        "active": null
      },
      {
        "type": "link",
        "url": "https://example.com/blog/30",
        "active": null
      }
    ]
  }
}

Finally, I can use that data to render my component on the frontend.

---

My main concern is that there are two queries in play. First is the actual BlogPosts query, then I additionally have to do await payload.find() in my resolver function to get the total page count of the collection.

It'd be ideal if I could use result.totalPages from the BlogPosts query, rather than making a brand new database lookup with payload.find() and also making sure to keep limit and page the same as in the main posts query. In other words, is it possible to do it like this:

{
    BlogPosts(limit: 16, page: 4) {
        docs {
            title
        }
        Pagination {
            type
            url
            active
        }
    }
}

Can I somehow add my custom pagination as a part of the main BlogPosts query and use its arguments, along with the underlying result containing totalPages, to avoid this inefficiency?