Πώς κάνεις pagination στο GraphQL: offset έναντι cursor;

Question

IT Interview Practice · Accepted Answer

Δύο στρατηγικές: **offset-based** (`limit`/`offset`) και **cursor-based**. Το GraphQL δεν έχει ενσωματωμένο pagination, αλλά το πρότυπο της κοινότητας είναι η προδιαγραφή **Relay Connection**, που τυποποιεί το cursor pagination.

## Offset έναντι cursor

- Το **offset** (`items(limit: 10, offset: 20)`) είναι απλό αλλά σπάει σε ζωντανά δεδομένα: αν εισαχθεί μια εγγραφή ενώ ο χρήστης διατρέχει σελίδες, τα στοιχεία μετατοπίζονται και βλέπεις διπλότυπα ή κενά. Επίσης γίνεται αργό σε βαθιά offsets (η DB εξακολουθεί να σαρώνει τις παραλειπόμενες εγγραφές).
- Το **cursor** δείχνει σε μια σταθερή θέση («δώσε μου 10 μετά από αυτό το στοιχείο»). Είναι ασφαλές σε εισαγωγές και κλιμακώνεται σε βαθιές σελίδες, με κόστος την απουσία τυχαίου «άλματος στη σελίδα 50».

## Relay connections

Μια connection τυλίγει τη λίστα σε `edges` (καθεμία με ένα `cursor` και ένα `node`) συν `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 είναι **αδιαφανές** — συνήθως ένα base64 του sort key — οπότε οι clients το αντιμετωπίζουν ως token, όχι ως αριθμό.

## Γιατί έχει σημασία

Η επιλογή offset έναντι cursor δείχνει ότι κατανοείς τη **συνέπεια υπό ταυτόχρονες εγγραφές** και την **απόδοση σε βαθιές σελίδες**. Η γνώση της μορφής της Relay connection έχει σημασία επειδή οι clients Apollo/Relay έχουν ενσωματωμένο χειρισμό cache γι' αυτήν.

Offset έναντι cursor

Relay connections

Γιατί έχει σημασία

Σχετικές ερωτήσεις