學習 GraphQL 語法

 學習 GraphQL 語法最好的方式是區分為三個部分：定義結構 (Schema)、查詢資料 (Query) 以及 修改資料 (Mutation)。

以下是一個以「部落格系統」為例的完整範例：

---

1. 定義結構 (Schema / SDL)

這是在後端定義的，決定了前端可以存取什麼樣的資料。

GraphQL

# 定義資料格式
type Post {
  id: ID!
  title: String!
  content: String
  author: User!  # 關聯到 User 型別
}

type User {
  id: ID!
  name: String!
  email: String!
}

# 定義「查詢」入口
type Query {
  allPosts: [Post]           # 取得所有文章
  post(id: ID!): Post        # 根據 ID 取得單一文章
}

# 定義「修改」入口
type Mutation {
  createPost(title: String!, content: String, authorId: ID!): Post
}

---

2. 查詢資料 (Query)

這是前端發出的請求。GraphQL 的精髓在於：你要什麼，就寫什麼。

請求範例： 我們只想取得文章的「標題」以及作者的「名字」。

GraphQL

query GetPosts {
  allPosts {
    title
    author {
      name
    }
  }
}

回傳結果 (JSON)：

JSON

{
  "data": {
    "allPosts": [
      {
        "title": "Hello GraphQL",
        "author": { "name": "Gemini" }
      }
    ]
  }
}

---

3. 修改資料 (Mutation)

當你需要新增、刪除或更新資料時使用。

請求範例： 新增一篇文章，並要求回傳新文章的 id。

GraphQL

mutation NewPost {
  createPost(
    title: "GraphQL 是什麼？", 
    content: "這是一篇介紹文...", 
    authorId: "user-123"
  ) {
    id
    title
  }
}

---

4. 進階：使用變數 (Variables)

在實際開發中，我們不會把參數寫死在字串裡，而是使用變數。

GraphQL

query GetSinglePost($postId: ID!) {
  post(id: $postId) {
    title
    content
  }
}

在發送請求時，會額外帶入一個 JSON 變數包：{ "postId": "101" }。

---

關鍵語法符號說明

• ! (驚嘆號)：代表該欄位是 Non-Nullable（必填/不可為空）。

• [] (中括號)：代表這是一個 List（陣列）。

• #：註解符號。

• Fragment (片段)：如果多個查詢使用重複的欄位，可以用 fragment 來封裝。

您想試試看在特定的程式語言（如 JavaScript/TypeScript）中，如何撰寫解析這些語法的 Resolver 邏輯嗎？