Come si esegue la paginazione in GraphQL: offset o cursor?

Question

IT Interview Practice · Accepted Answer

Due strategie: **basata su offset** (`limit`/`offset`) e **basata su cursor**. GraphQL non ha una paginazione integrata, ma lo standard della community è la specifica **Relay Connection**, che formalizza la paginazione con cursor.

## Offset contro cursor

- L'**offset** (`items(limit: 10, offset: 20)`) è semplice ma si rompe con i dati in tempo reale: se una riga viene inserita mentre l'utente sfoglia le pagine, gli elementi si spostano e si vedono duplicati o buchi. Inoltre diventa lento agli offset profondi (il DB deve comunque scorrere le righe saltate).
- Il **cursor** punta a una posizione stabile ("dammi i 10 dopo questo elemento"). È sicuro rispetto agli inserimenti e scala fino alle pagine profonde, al prezzo di non poter "saltare alla pagina 50".

## Le connection di Relay

Una connection avvolge la lista in `edges` (ciascuno con un `cursor` e un `node`) più `pageInfo`:

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

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}
type PostEdge {
  cursor: String!        # opaque token for THIS node's position
  node: Post!            # the actual item
}
type PageInfo {
  endCursor: String      # feed this back as 'after' for the next page
  hasNextPage: Boolean!  # so the client knows when to stop
}
```

```js
// resolver: fetch ONE extra row to compute hasNextPage cheaply
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 },
};
```

Il cursor è **opaco** — di solito un base64 della chiave di ordinamento — così i client lo trattano come un token, non come un numero.

## Perché è importante

Scegliere tra offset e cursor dimostra che comprendi la **coerenza in presenza di scritture concorrenti** e le **prestazioni sulle pagine profonde**. Conoscere la forma della connection di Relay è importante perché i client Apollo/Relay hanno una gestione della cache integrata per essa.

Offset contro cursor

Le connection di Relay

Perché è importante

Domande correlate