Miten paginoidaan GraphQL:ssä: offset vs. cursor?

Question

IT Interview Practice · Accepted Answer

Kaksi strategiaa: **offset-pohjainen** (`limit`/`offset`) ja **cursor-pohjainen**. GraphQL:ssä ei ole sisäänrakennettua paginointia, mutta yhteisön standardi on **Relay Connection** -spesifikaatio, joka formalisoi cursor-paginoinnin.

## Offset vs. cursor

- **Offset** (`items(limit: 10, offset: 20)`) on yksinkertainen mutta rikkoutuu elävällä datalla: jos rivi lisätään käyttäjän selatessa, alkiot siirtyvät ja näet duplikaatteja tai aukkoja. Se myös hidastuu syvillä offseteilla (DB skannaa silti ohitetut rivit).
- **Cursor** osoittaa vakaaseen sijaintiin ("anna 10 tämän alkion jälkeen"). Se on lisäyksille turvallinen ja skaalautuu syviin sivuihin, hintana ei satunnaista "hyppyä sivulle 50".

## Relay-connectionit

Connection kietoo listan `edges`iin (jokaisella `cursor` ja `node`) plus `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 },
};
```

Cursor on **läpinäkymätön** (opaque) — yleensä lajitteluavaimen base64 — joten clientit käsittelevät sitä tokenina, ei numerona.

## Miksi se on tärkeää

Offsetin ja cursorin välillä valitseminen osoittaa, että ymmärrät **konsistenssin samanaikaisten kirjoitusten aikana** ja **syvien sivujen suorituskyvyn**. Relay-connectionin muodon tunteminen on tärkeää, koska Apollo-/Relay-clienteissä on sille valmis cache-käsittely.

Offset vs. cursor

Relay-connectionit

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset