REST နှင့် GraphQL ကို သဘောတရားအရ

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

REST သည် URL ဖြင့် ဖော်ပြသော resource များကို HTTP method များဖြင့် ကိုင်တွယ်သည့် API style ဖြစ်သည်။

• GET /users - user စာရင်း
• GET /users/42 - user တစ်ဦးတည်း
• POST /users - user အသစ် ဖန်တီး
• PATCH /users/42 - user update
• DELETE /users/42 - user ဖျက်

GraphQL သည် များသောအားဖြင့် endpoint တစ်ခုတည်းကို ဖော်ထုတ်ပြီး client သည် လိုချင်သော field များကို ဖော်ပြသော query ပို့သည်, ဥပမာ { user(id: 42) { name, avatarUrl } }.

REST VS GRAPHQL SHAPE
---------------------
REST: MULTIPLE ENDPOINTS         GRAPHQL: ONE ENDPOINT
-------------------------         -----------------------

 Client                            Client
   |-- GET /users/42 --> Server      |-- POST /graphql --> Server
   |-- GET /users/42                 |   { user(id:42){
   |     /avatar --------> Server    |     name, avatarUrl } }
   |                                 |<-- { name, avatarUrl }
  (2 requests, fixed shape)         (1 request, chosen shape)

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

page တစ်ခုသည် name နှင့် avatarUrl တစ်ခုတည်းသာ လိုအပ်ပါက REST က call နှစ်ကြိမ်လိုနိုင်ပြီး GraphQL က query တစ်ခုတည်းနှင့် ပြီးနိုင်သည်။

အောက်ပါ code တွင် fetchViaRest နှင့် fetchViaGraphql သည် mock data တူညီအပေါ် run ပြီး result ပုံသဏ္ဌာန်တူညီစွာ ထုတ်ပေးသည်။

• REST သည် resource ပုံစံ endpoint များစွာကို ဖော်ပြပြီး GraphQL သည် များသောအားဖြင့် endpoint တစ်ခုတည်းဖြင့် client ကို field ရွေးချယ်ခွင့်ပေးသည်။
• နည်းလမ်းနှစ်ခုစလုံးမှ တစ်ခုချင်းစီ အလိုအလျောက် ပိုကောင်း (သို့) ပိုမြန်သည်ဟု မရှိပါ - REST သည် HTTP caching ရင့်ကျက်မှုကို အားထားပြီး GraphQL သည် field ရွေးချယ်မှု လွတ်လပ်မှုကို ရွေးချယ်သည်။
• REST method၊ status code နှင့် API design ၏ depth အပြည့်အစုံကို API Tutorial နှင့် API Integration & Webhooks သင်ခန်းစာများတွင် လေ့လာနိုင်သည်။

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

// Mock "server-side" data
const usersDb = {
  42: { id: 42, name: "Dana", avatarUrl: "https://cdn.example.com/dana.png", email: "dana@example.com" },
};

// REST-style: separate endpoint calls
function restGetUser(id) {
  return { ...usersDb[id] }; // GET /users/:id returns the full record
}
function restGetAvatar(id) {
  return { avatarUrl: usersDb[id].avatarUrl }; // GET /users/:id/avatar
}

function fetchViaRest(id) {
  const user = restGetUser(id);
  const avatar = restGetAvatar(id);
  return { name: user.name, avatarUrl: avatar.avatarUrl };
}

// GraphQL-style: one call, client picks fields
function graphqlQuery(id, fields) {
  const record = usersDb[id];
  const result = {};
  fields.forEach((field) => {
    result[field] = record[field];
  });
  return result;
}

function fetchViaGraphql(id) {
  return graphqlQuery(id, ["name", "avatarUrl"]);
}

console.log("REST result:", fetchViaRest(42));
console.log("GraphQL result:", fetchViaGraphql(42));

fetchViaRest(42) နှင့် fetchViaGraphql(42) နှစ်ခုစလုံးသည် တူညီသော ရလဒ် { name: 'Dana', avatarUrl: 'https://cdn.example.com/dana.png' } ကို log ထုတ်သည်။

GraphQL.org - Introduction to GraphQL — How the Web Works