Thuta Learning
ရှာဖွေရန်
GraphQL
ProjectsWeb Developmentbeginner

Project 1 — Blog API with Apollo Server

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

  • Project 1 — Blog API with Apollo Server concept ကို နားလည်ရှင်းပြနိုင်ရန်
  • နမူနာ GraphQL query/code ကို ကိုယ်တိုင် run ပြီး output စစ်နိုင်ရန်
  • Tutorial Platform project နှင့် production scenario တွင် မှန်ကန်စွာအသုံးချနိုင်ရန်

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

ဒီ project မှာ ယခင် lessons တွေက schema design, resolvers/context, DataLoader batching ကို Blog API တစ်ခုလုံးအဖြစ်ပေါင်းစည်းမယ်—`Post`/`Comment` types, `posts` query, `createPost`/`addComment` mutations, `Post.comments` field ကို DataLoader-backed resolver ဖြင့် ချိတ်ဆက်ပါမယ်။ Application layering ကို schema (contract) → resolvers (glue) → repository/db (data access) လို့ သီးခြားစီထားပြီး testability ကောင်းအောင် ဆောက်ပါတယ်။

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

Tutorial Platform ရဲ့ blog section ကို ဒီ project ဖြင့် ဆောက်မယ်—`Post` (id, title, body) နှင့် `Comment` (id, body, author) type နှစ်ခု၊ `posts` query, `createPost`/`addComment` mutations, comments ကို `commentsByPost` DataLoader ဖြင့် batch ဖတ်တာ ပါဝင်ပါမယ်။ End-to-end test ကို post တစ်ခု create → comment နှစ်ခု add → posts query ဖြင့် nested comments ပါလာမမလား စစ်ဆေးမယ်။

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

typescript
const typeDefs = `#graphql
  type Post {
    id: ID!
    title: String!
    body: String!
    comments: [Comment!]!
  }

  type Comment {
    id: ID!
    body: String!
    author: String!
  }

  type Query {
    posts: [Post!]!
  }

  type Mutation {
    createPost(title: String!, body: String!): Post!
    addComment(postId: ID!, body: String!, author: String!): Comment!
  }
`;

const resolvers = {
  Query: {
    posts: (_p: unknown, _a: unknown, ctx: Context) => ctx.db.post.findMany(),
  },
  Mutation: {
    createPost: (_p: unknown, args: PostInput, ctx: Context) =>
      ctx.db.post.create({ data: args }),
    addComment: (_p: unknown, args: CommentInput, ctx: Context) =>
      ctx.db.comment.create({ data: args }),
  },
  Post: {
    comments: (post: Post, _a: unknown, ctx: Context) =>
      ctx.loaders.commentsByPost.load(post.id),
  },
};
You should see
Working Blog API တစ်ခုကို schema/resolvers/mutations/DataLoader အားလုံးနဲ့ end-to-end run နိုင်မည်။

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

`deletePost(id: ID!): Boolean!` mutation တစ်ခု ထည့်ပြီး associated comments များကိုပါ ဖျက်စေအောင် resolver ရေးပါ။

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

Comment ကို post နှင့် unrelated `Comment` array တစ်ခုတည်းသိမ်းပြီး `postId` ဖြင့် filter မလုပ်ဘဲ `Post.comments` resolver ထဲ manual find loop ရေးရင် Project ကြီးလာတာနဲ့အမျှ O(N) filter cost ကြီးလာနိုင်ပါတယ်—database query/DataLoader ကိုသုံးပါ။

Apollo Server — Getting Started — GraphQL

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

  • Comment ကို post နှင့် unrelated `Comment` array တစ်ခုတည်းသိမ်းပြီး `postId` ဖြင့် filter မလုပ်ဘဲ `Post.comments` resolver ထဲ manual find loop ရေးရင် Project ကြီးလာတာနဲ့အမျှ O(N) filter cost ကြီးလာနိုင်ပါတယ်—database query/DataLoader ကိုသုံးပါ။
  • နမူနာ query/mutation ကို production API ပေါ် တိုက်ရိုက်မစမ်းဘဲ local/test server နှင့် recoverable data ပေါ်တွင် အရင်အတည်ပြုပါ။

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

`deletePost(id: ID!): Boolean!` mutation တစ်ခု ထည့်ပြီး associated comments များကိုပါ ဖျက်စေအောင် resolver ရေးပါ။

You'll know it worked when: Working Blog API တစ်ခုကို schema/resolvers/mutations/DataLoader အားလုံးနဲ့ end-to-end run နိုင်မည်။

Project 1 — Blog API with Apollo Server | Thuta Learning