Kako paginirati u GraphQL-u: offset naspram cursora?

Question

IT Interview Practice · Accepted Answer

Dvije strategije: **temeljena na offsetu** (`limit`/`offset`) i **temeljena na cursoru**. GraphQL nema ugrađenu paginaciju, ali standard zajednice je specifikacija **Relay Connection**, koja formalizira paginaciju cursorom.

## Offset naspram cursora

- **Offset** (`items(limit: 10, offset: 20)`) je jednostavan, ali se lomi na živim podacima: ako se redak umetne dok korisnik lista, elementi se pomiču i vidite duplikate ili praznine. Također postaje spor pri dubokim offsetima (baza i dalje skenira preskočene retke).
- **Cursor** pokazuje na stabilnu poziciju ("daj mi 10 nakon ovog elementa"). Siguran je pri umetanju i skalira se do dubokih stranica, po cijenu nemogućnosti nasumičnog "skoka na stranicu 50".

## Relay konekcije

Konekcija omata listu u `edges` (svaki s `cursor` i `node`) plus `pageInfo`:

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

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}
type PostEdge {
  cursor: String!        # neproziran token za poziciju OVOG nodea
  node: Post!            # stvarni element
}
type PageInfo {
  endCursor: String      # proslijedi ovo natrag kao 'after' za sljedeću stranicu
  hasNextPage: Boolean!  # kako bi klijent znao kada stati
}
```

```js
// resolver: dohvati JEDAN dodatni redak za jeftino izračunavanje hasNextPage
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 je **neproziran** — obično base64 ključa sortiranja — pa ga klijenti tretiraju kao token, a ne broj.

## Zašto je to važno

Odabir offseta naspram cursora pokazuje da razumijete **konzistentnost pri istovremenim upisima** i **performanse dubokih stranica**. Poznavanje oblika Relay konekcije važno je jer Apollo/Relay klijenti imaju ugrađeno rukovanje cacheom za njega.

Offset naspram cursora

Relay konekcije

Zašto je to važno

Povezana pitanja