Jak stronicować w GraphQL: offset kontra kursor?

Question

IT Interview Practice · Accepted Answer

Dwie strategie: **oparta na offsecie** (`limit`/`offset`) oraz **oparta na kursorze**. GraphQL nie ma wbudowanego stronicowania, ale standardem społeczności jest specyfikacja **Relay Connection**, która formalizuje stronicowanie kursorowe.

## Offset kontra kursor

- **Offset** (`items(limit: 10, offset: 20)`) jest prosty, ale zawodzi na danych na żywo: jeśli wiersz zostanie wstawiony podczas przeglądania przez użytkownika, elementy się przesuwają i widzisz duplikaty lub luki. Staje się też wolny przy głębokich offsetach (baza wciąż skanuje pominięte wiersze).
- **Kursor** wskazuje stabilną pozycję („daj mi 10 po tym elemencie”). Jest bezpieczny przy wstawianiu i skaluje się do głębokich stron, kosztem braku losowego „przeskoku do strony 50”.

## Połączenia Relay

Połączenie opakowuje listę w `edges` (każdy z `cursor` i `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 },
};
```

Kursor jest **nieprzezroczysty** — zwykle to base64 klucza sortowania — więc klienci traktują go jako token, a nie liczbę.

## Dlaczego to ważne

Wybór offsetu kontra kursora pokazuje, że rozumiesz **spójność przy współbieżnych zapisach** oraz **wydajność głębokich stron**. Znajomość kształtu połączenia Relay ma znaczenie, ponieważ klienci Apollo/Relay mają dla niego wbudowaną obsługę cache.

Offset kontra kursor

Połączenia Relay

Dlaczego to ważne

Powiązane pytania