Pagination — Offset vs Cursor-Based Connections

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Pagination — Offset vs Cursor-Based Connections concept ကို နားလည်ရှင်းပြနိုင်ရန်
နမူနာ GraphQL query/code ကို ကိုယ်တိုင် run ပြီး output စစ်နိုင်ရန်
Tutorial Platform project နှင့် production scenario တွင် မှန်ကန်စွာအသုံးချနိုင်ရန်

နားလည်ထားရမယ့် အချက်

Offset pagination (`skip`, `limit`) က ရိုးရှင်းပေမယ့် underlying data ထဲ insert/delete ဖြစ်နေစဉ် page ကူးလျှင် item ကျော်/ထပ်ဖြစ်နိုင်ပါတယ်။ Cursor-based pagination ကတော့ opaque cursor (stable sort key ကို encode ထားတဲ့ string) တစ်ခုကို "ဒီနေရာကနေ ဆက်ပါ" ဆိုတဲ့ pointer အဖြစ်သုံးလို့ ပိုတည်ငြိမ်ပါတယ်။ Relay-style connection pattern က `edges` (each with `cursor` + `node`) နှင့် `pageInfo` (`hasNextPage`, `endCursor`) ကို standard shape အဖြစ် သတ်မှတ်ထားပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Tutorial Platform ရဲ့ catalog list ကို `tutorials(first: 20, after: $cursor): TutorialConnection!` ဖြင့် expose မယ်။ Frontend က "Load more" button ကို click ရင် `pageInfo.endCursor` ကို နောက် request ရဲ့ `after` argument အဖြစ်ပို့ပြီး `pageInfo.hasNextPage` က `false` ဖြစ်တဲ့အထိ ဆက်ခေါ်ပါမယ်။

Offset pagination = simple, unstable during data change
Cursor = opaque pointer, ပိုတည်ငြိမ်
Relay connection = edges + node + pageInfo standard shape

အတူတူ စမ်းရေးကြည့်မယ်

graphql

type TutorialEdge {
  cursor: String!
  node: Tutorial!
}

type PageInfo {
  hasNextPage: Boolean!
  endCursor: String
}

type TutorialConnection {
  edges: [TutorialEdge!]!
  pageInfo: PageInfo!
}

type Query {
  tutorials(first: Int!, after: String): TutorialConnection!
}

You should see

Relay-style connection schema တစ်ခုရေးပြီး cursor-based "load more" flow ကို ရှင်းပြနိုင်မည်။

၅ မိနစ် စမ်းကြည့်

`commentsConnection(first: Int!, after: String): CommentConnection!` schema တစ်ခုရေးပြီး `pageInfo.hasNextPage` ကို frontend loop ထဲ ဘယ်လိုသုံးမလဲ ရေးပါ။

သတိလေးတစ်ချက်

Cursor string ကို database row ID plain number အဖြစ် client သိအောင် ထုတ်ပြထားလျှင် client က cursor arithmetic (id+1) လုပ်ကြိုးစားနိုင်ပါတယ်—cursor ကို opaque/encoded string အဖြစ်ထားပါ။

GraphQL — Pagination — GraphQL

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Cursor string ကို database row ID plain number အဖြစ် client သိအောင် ထုတ်ပြထားလျှင် client က cursor arithmetic (id+1) လုပ်ကြိုးစားနိုင်ပါတယ်—cursor ကို opaque/encoded string အဖြစ်ထားပါ။
နမူနာ query/mutation ကို production API ပေါ် တိုက်ရိုက်မစမ်းဘဲ local/test server နှင့် recoverable data ပေါ်တွင် အရင်အတည်ပြုပါ။

လေ့ကျင့်ခန်း

You'll know it worked when: Relay-style connection schema တစ်ခုရေးပြီး cursor-based "load more" flow ကို ရှင်းပြနိုင်မည်။