¿Cómo se pagina en GraphQL: offset frente a cursor?

Question

IT Interview Practice · Accepted Answer

Dos estrategias: **basada en offset** (`limit`/`offset`) y **basada en cursor**. GraphQL no tiene paginación integrada, pero el estándar de la comunidad es la spec **Relay Connection**, que formaliza la paginación por cursor.

## Offset frente a cursor

- **Offset** (`items(limit: 10, offset: 20)`) es simple pero se rompe con datos en vivo: si se inserta una fila mientras el usuario pagina, los elementos se desplazan y ves duplicados o huecos. También se vuelve lento con offsets profundos (la BD sigue escaneando las filas omitidas).
- **Cursor** apunta a una posición estable ("dame 10 después de este elemento"). Es seguro ante inserciones y escala a páginas profundas, a cambio de no poder "saltar a la página 50" de forma aleatoria.

## Relay connections

Una connection envuelve la lista en `edges` (cada uno con un `cursor` y un `node`) más `pageInfo`:

```graphql
type Query {
  posts(first: Int!, after: String): PostConnection!   # first = tamaño de página, after = cursor
}

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}
type PostEdge {
  cursor: String!        # token opaco para la posición de ESTE node
  node: Post!            # el elemento en sí
}
type PageInfo {
  endCursor: String      # reenvíalo como 'after' para la siguiente página
  hasNextPage: Boolean!  # para que el cliente sepa cuándo parar
}
```

```js
// resolver: obtén UNA fila extra para calcular hasNextPage de forma barata
const rows = await db.posts.find({ after: args.after, limit: args.first + 1 });
const hasNextPage = rows.length > args.first;
const page = rows.slice(0, args.first);
return {
  edges: page.map((p) => ({ node: p, cursor: encodeCursor(p.id) })),
  pageInfo: { endCursor: page.at(-1) && encodeCursor(page.at(-1).id), hasNextPage },
};
```

El cursor es **opaco** —normalmente un base64 de la clave de ordenación— así que los clientes lo tratan como un token, no como un número.

## Por qué es importante

Elegir offset frente a cursor demuestra que entiendes la **consistencia bajo escrituras concurrentes** y el **rendimiento en páginas profundas**. Conocer la forma de la Relay connection importa porque los clientes Apollo/Relay tienen manejo de cache integrado para ella.

Offset frente a cursor

Relay connections

Por qué es importante

Preguntas relacionadas