Using Apollo Server 4 for GraphQL Pagination and Enhancing Data Fetching Efficiency

Welcome to another GraphQL lesson that now focuses on pagination, a critical concept for efficiently handling large datasets.

Pagination is the technique of dividing a dataset into discrete pages, allowing clients to request data in manageable chunks instead of all at once. This improves performance, reduces bandwidth, and provides a better user experience.

First, let's define the TypeScript code for the GraphQL schema:

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `#graphql
  type Book {
    id: ID!
    title: String!
    author: String!
  }

  type Query {
    books(limit: Int, offset: Int): [Book]
  }
`;

Here:

• Book Type: It has three fields: id, title, and author.
• Query Type: The books query takes two optional arguments: limit and offset, returning an array of Book.

Resolvers are functions that handle fetching data when a field is queried. Here’s how to add the pagination logic:

const books = Array.from({ length: 50 }, (_, i) => ({
  id: String(i + 1),
  title: `Book ${i + 1}`,
  author: `Author ${i + 1}`
}));

const resolvers = {
  Query: {
    books: (_: unknown, { limit = 10, offset = 0 }: { limit?: number; offset?: number }) => books.slice(offset, offset + limit)
  }
};

Here:

• books Array: An array of 50 sample book objects is created for demonstration purposes.
• Query Resolver: The books resolver function takes two optional arguments, limit and offset, with default values of 10 and 0, respectively.
• slice Method: The resolver uses the slice method on the books array to return a portion of the array, effectively providing paginated results.

Let's configure and start the Apollo Server 4 instance to serve our GraphQL API:

const server = new ApolloServer({
  typeDefs,
  resolvers
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀 Server ready at: ${url}`);

Here:

• ApolloServer Instance: Created with typeDefs and resolvers.
• Server Start: Utilizes startStandaloneServer to initiate the server on port 4000.