Yaya kake yin pagination a cikin GraphQL: offset ko cursor?

Question

IT Interview Practice · Accepted Answer

Dabaru biyu: **offset-based** (`limit`/`offset`) da **cursor-based**. GraphQL ba shi da pagination da aka gina ciki, amma ma'aunin al'umma shi ne ƙayyadaddar **Relay Connection**, wadda take tsara cursor pagination bisa tsari.

## Offset da cursor

- **Offset** (`items(limit: 10, offset: 20)`) mai sauƙi ne amma yana karyewa a kan bayanai masu rai: idan aka saka layi yayin da mai amfani ke shafewa, abubuwa suna motsawa kuma ka ga kwafi ko gibi. Yana kuma zama sannu-sannu a offset masu zurfi (DB har yanzu tana bincika layukan da aka tsallake).
- **Cursor** yana nuna wani wuri mai kwanciyar hankali ("ba ni 10 bayan wannan abu"). Yana da aminci ga saka bayanai kuma yana ƙyalƙyalewa zuwa shafuka masu zurfi, a kan tsadar rashin damar "tsalle zuwa shafi na 50".

## Relay connections

Connection yana nannaɗe jerin cikin `edges` (kowanne da `cursor` da `node`) tare da `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 ɗin **opaque** ne — galibi base64 na sort key — don haka abokan ciniki suna ɗaukarsa a matsayin token, ba lamba ba.

## Me ya sa yake da muhimmanci

Zaɓar offset ko cursor yana nuna cewa ka fahimci **daidaituwa a ƙarƙashin rubuce-rubuce na lokaci guda** da **aikin shafuka masu zurfi**. Sanin siffar Relay connection yana da muhimmanci saboda Apollo/Relay clients suna da sarrafa cache da aka gina ciki dominsa.

Offset da cursor

Relay connections

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa