Bagaimana anda melakukan pagination dalam GraphQL: offset berbanding cursor?

Question

IT Interview Practice · Accepted Answer

Dua strategi: **berasaskan offset** (`limit`/`offset`) dan **berasaskan cursor**. GraphQL tiada pagination terbina dalam, tetapi standard komuniti ialah spesifikasi **Relay Connection**, yang memformalkan pagination cursor.

## Offset berbanding cursor

- **Offset** (`items(limit: 10, offset: 20)`) adalah ringkas tetapi rosak pada data langsung: jika satu baris disisipkan semasa pengguna membelek halaman, item beranjak dan anda melihat pendua atau jurang. Ia juga menjadi perlahan pada offset yang dalam (DB masih mengimbas baris yang dilangkau).
- **Cursor** menunjuk kepada kedudukan yang stabil ("beri saya 10 selepas item ini"). Ia selamat terhadap sisipan dan berskala kepada halaman dalam, dengan kos tiada "lompat terus ke halaman 50" secara rawak.

## Sambungan Relay

Satu connection membalut senarai dalam `edges` (masing-masing dengan `cursor` dan `node`) berserta `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 itu adalah **legap (opaque)** — biasanya base64 bagi kunci isihan — jadi klien menganggapnya sebagai token, bukan nombor.

## Mengapa ia penting

Memilih offset berbanding cursor menunjukkan anda memahami **konsistensi di bawah tulisan serentak** dan **prestasi halaman dalam**. Mengetahui bentuk Relay connection penting kerana klien Apollo/Relay mempunyai pengendalian cache terbina dalam untuknya.

Offset berbanding cursor

Sambungan Relay

Mengapa ia penting

Soalan berkaitan