Skip to main content

Pagination

The Pagination plugin adds support for Relay-style pagination, automatically generating the necessary GraphQL types for cursor-based pagination.

Installation​

yarn add @baeta/plugin-pagination -D

Configuration​

Enable pagination plugin in your baeta.ts:

import { defineConfig } from "@baeta/cli";
import { paginationPlugin } from "@baeta/plugin-pagination";

export default defineConfig({
  plugins: [
    paginationPlugin({
      // Customize the PageInfo type with additional fields
      pageInfoFields: ["hasMorePages: Boolean!"],

      // Make the node field nullable in all connections
      nullableNode: true,

      // Configure pagination for specific types
      types: {
        // Simple configuration - generate default connection types
        User: true,
        UserPhoto: true,

        // Advanced configuration with custom fields
        UserCustom: {
          nodeType: "User", // Use a different type for nodes
          cursorType: "UUID!", // Specify cursor type (default: ID!)
          connectionFields: ["totalCount: Int!"], // Add fields to connection type
          edgeFields: ["hasPhotos: Boolean!"], // Add fields to edge type
        },
      },
    }),
  ],
});

Usage​

Define your pagination input type and use the generated connection type:

input UserPhotoPage {
  cursor: ID
  limit: Int! @validInt(min: 1, max: 50)
}

extend type User {
  photosConnection(page: UserPhotoPage!): UserPhotoConnection
}

The plugin will automatically generate:

  • Connection types (e.g., UserPhotoConnection)
  • Edge types (e.g., UserPhotoEdge)
  • PageInfo type with standard and custom fields
  • All necessary TypeScript types for your resolvers
tip

The implementation of resolvers depends on your data source (ORM, database, etc.). For a showcase of how to implement pagination with Prisma, check out the pagination example.