在全端開發的世界中，API 是前端與後端溝通的橋樑。傳統的 REST API 雖然廣泛使用，但在現代應用中常會遇到過度請求（Over-fetching） 或 不足請求（Under-fetching） 的問題。
這時候，GraphQL 成為了全端工程師不可忽略的技術！
如果你曾經遇過這些問題：
- 「這個 API 回傳太多沒用的資料，造成前端效能浪費」
- 「我只需要一個欄位，卻得發三次 API 才拿得到完整的資料」
- 「後端 API 設計太死板，前端需求變更時需要重構 API」
那麼，GraphQL 會徹底改變你的 API 設計方式！
什麼是 GraphQL？
GraphQL 是由 Facebook 開發的 API 查詢語言，它允許客戶端自行決定需要哪些資料，從而避免過度或不足請求。
與傳統的 REST API 不同，GraphQL 只提供一個單一的 API 端點，前端可以透過查詢語法（Query） 自訂要獲取的資料，提升 API 的靈活性與效能。
GraphQL vs. REST API
| REST API | GraphQL | |
|---|---|---|
| 請求方式 | 多個端點（/users、/posts） |
單一端點（/graphql） |
| 回傳資料 | 固定格式，可能會回傳不必要的欄位 | 客戶端決定需要哪些欄位 |
| 請求效率 | 可能需要多次請求才能獲得完整資料 | 單次請求即可獲取所有需要的資料 |
| 擴展性 | 需要新增端點或修改 API 結構 | 透過 Schema 設計即時擴展 |
| 適合場景 | 靜態 API，資料結構變動少 | 動態 API，需求變更頻繁 |
GraphQL 的靈活性與高效查詢能力，讓它特別適合全端開發，減少前端 API 整合的麻煩，提高應用的效能。
GraphQL 的基本概念
1. Schema（架構）
GraphQL API 的核心在於 Schema 定義，它描述了 API 的結構，包括資料類型與查詢方式。
例如，假設我們要設計一個部落格系統，GraphQL Schema 可能長這樣：
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}
type Query {
users: [User]
user(id: ID!): User
posts: [Post]
}
這表示我們可以查詢 users 或 posts，並獲得關聯的資料，例如 user.posts 直接回傳該用戶的文章，而不需要額外發送 API。
2. Query（查詢資料）
GraphQL 允許前端自行選擇要取得的欄位，不會獲取額外不需要的資料。
例如，我們只想獲取使用者的 id 和 name，而不拿 email：
query {
users {
id
name
}
}
回傳的 JSON：
{
"data": {
"users": [
{ "id": "1", "name": "Alice" },
{ "id": "2", "name": "Bob" }
]
}
}
這與 REST API 一口氣回傳所有欄位的方式不同，減少了不必要的資料傳輸，提高效能。
3. Mutation（修改資料）
GraphQL 也支援 Mutation，用來處理新增、修改、刪除資料。
例如，新增一篇文章的 Mutation：
mutation {
createPost(title: "GraphQL 是什麼？", content: "這是一篇 GraphQL 教學文章") {
id
title
}
}
後端的 GraphQL 伺服器會執行這個請求，並回傳新文章的 id 和 title。
如何在全端專案中使用 GraphQL？
後端 - 使用 Node.js + Apollo Server
安裝 Apollo Server：
npm install apollo-server graphql
建立 server.js：
const { ApolloServer, gql } = require("apollo-server");
// 定義 Schema
const typeDefs = gql`
type User {
id: ID!
name: String!
email: String!
}
type Query {
users: [User]
}
`;
// 模擬資料
const users = [
{ id: "1", name: "Alice", email: "alice@example.com" },
{ id: "2", name: "Bob", email: "bob@example.com" }
];
// Resolver 定義查詢方式
const resolvers = {
Query: {
users: () => users,
}
};
// 啟動 GraphQL 伺服器
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`? Server ready at ${url}`);
});
執行 node server.js，即可啟動 GraphQL API。
前端 - 使用 React + Apollo Client
安裝 Apollo Client：
npm install @apollo/client graphql
在 React 應用中使用 GraphQL 查詢資料：
import { useQuery, gql } from "@apollo/client";
const GET_USERS = gql`
query {
users {
id
name
}
}
`;
function Users() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>載入中...</p>;
if (error) return <p>錯誤: {error.message}</p>;
return (
<ul>
{data.users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default Users;
當 React 應用啟動時，它會透過 GraphQL 取得 users，並顯示在畫面上。
為什麼全端工程師應該學 GraphQL？
- 更靈活的 API 設計 - 無需建立多個端點，只需一個
/graphql，讓前端決定需要哪些資料。 - 減少 API 請求數量 - 一個請求就能獲取所有關聯資料，避免 REST API 需要多次請求。
- 提升前端開發效率 - API 結構更清晰，前端可以根據需求取得特定欄位，不受後端限制。
- 更適合 SPA 和行動應用 - GraphQL 能減少不必要的資料傳輸，加快響應速度。
結論
GraphQL 為全端工程師提供了一種更靈活、更高效的 API 設計方式，不僅提升開發體驗，還能讓應用程式更快速、更省資源。
如果你是全端工程師，現在正是學習 GraphQL 的最佳時機！
你對 GraphQL 有什麼看法？你比較喜歡 REST API 還是 GraphQL？歡迎留言討論！ ?
評論