Kaip GraphQL'e daryti puslapiavimą (pagination): offset vs cursor?

Question

IT Interview Practice · Accepted Answer

Dvi strategijos: **offset pagrindu** (`limit`/`offset`) ir **cursor pagrindu**. GraphQL neturi įtaisyto puslapiavimo, tačiau bendruomenės standartas yra **Relay Connection** specifikacija, kuri formalizuoja cursor puslapiavimą.

## Offset vs cursor

- **Offset** (`items(limit: 10, offset: 20)`) yra paprastas, bet lūžta su gyvais duomenimis: jei eilutė įterpiama, kol vartotojas verčia puslapius, elementai pasislenka ir matote dublikatus arba spragas. Jis taip pat lėtėja esant giliems offset (DB vis tiek skenuoja praleistas eilutes).
- **Cursor** rodo į stabilią poziciją („duok man 10 po šio elemento“). Jis saugus įterpimų atžvilgiu ir keičiasi masteliu iki gilių puslapių, tačiau už tai neturi atsitiktinio „šokti į 50-tą puslapį“.

## Relay connections

Connection apgaubia sąrašą į `edges` (kiekvienas su `cursor` ir `node`) plius `pageInfo`:

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

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}
type PostEdge {
  cursor: String!        # neskaidrus (opaque) žetonas ŠIO node pozicijai
  node: Post!            # pats elementas
}
type PageInfo {
  endCursor: String      # perduokite jį atgal kaip 'after' kitam puslapiui
  hasNextPage: Boolean!  # kad klientas žinotų, kada sustoti
}
```

```js
// resolveris: parsiunčiame VIENĄ papildomą eilutę, kad pigiai apskaičiuotume 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 yra **neskaidrus** (opaque) — dažniausiai rūšiavimo rakto base64 — todėl klientai traktuoja jį kaip žetoną, o ne skaičių.

## Kodėl tai svarbu

Pasirinkimas tarp offset ir cursor parodo, kad suprantate **nuoseklumą esant lygiagretiems rašymams** ir **gilių puslapių našumą**. Relay connection struktūros žinojimas svarbus, nes Apollo/Relay klientai turi jai įtaisytą cache tvarkymą.

Offset vs cursor

Relay connections

Kodėl tai svarbu

Susiję klausimai