Hoe pagineer je in GraphQL: offset versus cursor?

Question

IT Interview Practice · Accepted Answer

Twee strategieën: **offset-based** (`limit`/`offset`) en **cursor-based**. GraphQL heeft geen ingebouwde paginering, maar de community-standaard is de **Relay Connection**-spec, die cursor-paginering formaliseert.

## Offset versus cursor

- **Offset** (`items(limit: 10, offset: 20)`) is eenvoudig maar breekt bij live data: als er een rij wordt ingevoegd terwijl de user pagineert, verschuiven de items en zie je duplicaten of gaten. Het wordt ook traag bij diepe offsets (de DB scant de overgeslagen rijen nog steeds).
- **Cursor** wijst naar een stabiele positie ("geef me 10 na dit item"). Het is insert-veilig en schaalt naar diepe pagina's, ten koste van geen willekeurige "spring naar pagina 50".

## Relay-connections

Een connection wikkelt de lijst in `edges` (elk met een `cursor` en `node`) plus `pageInfo`:

```graphql
type Query {
  posts(first: Int!, after: String): PostConnection!   # first = paginagrootte, after = cursor
}

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}
type PostEdge {
  cursor: String!        # opaque token voor de positie van DEZE node
  node: Post!            # het daadwerkelijke item
}
type PageInfo {
  endCursor: String      # voer dit terug als 'after' voor de volgende pagina
  hasNextPage: Boolean!  # zodat de client weet wanneer te stoppen
}
```

```js
// resolver: haal ÉÉN extra rij op om hasNextPage goedkoop te berekenen
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 },
};
```

De cursor is **opaque** — meestal een base64 van de sorteersleutel — dus clients behandelen hem als een token, niet als een nummer.

## Waarom het belangrijk is

De keuze tussen offset en cursor laat zien dat je **consistentie bij gelijktijdige writes** en **performance bij diepe pagina's** begrijpt. De Relay-connection-vorm kennen is belangrijk omdat Apollo/Relay-clients er ingebouwde cache-afhandeling voor hebben.

Offset versus cursor

Relay-connections

Waarom het belangrijk is

Gerelateerde vragen