GraphQL 線上課程教學影片

編程線上教學課程內容

課程簡介

GraphQL 是由 Facebook 開發的現代 API 查詢語言，解決了傳統 REST API 的資料過量或不足問題。透過精準的資料請求機制，GraphQL 大幅提升了前端與後端的開發效率。
本課程在一小時內帶你從零開始，理解 GraphQL 的核心概念（Schema、Query、Mutation、Subscription），並透過實作體驗 Schema 定義、Resolvers 設計與前端整合流程。完成後，學員將能建立自己的第一個 GraphQL API，並理解其在現代開發中的核心價值。

 

適合對象：

• 前端、後端、全端開發人員

• 熟悉 REST API 並想升級到 GraphQL 的工程師

• React、Vue、Angular 開發者

• API 設計與效能優化相關從業者

---

 

一小時課程大綱

第一章：課程導入與 GraphQL 核心概念（約 5 分鐘）

• GraphQL 簡介：與 REST API 的根本差異

• 三大核心操作：Query（查詢）、Mutation（修改）、Subscription（即時資料）

• GraphQL 的三大原則：客戶端指定需求、單一端點、版本無關

• 展示簡單 GraphQL 查詢與 REST 對比

第二章：Schema 設計與類型系統（約 10 分鐘）

• Schema 定義語法：type、query、mutation

• 物件類型（Object Type）、純量類型（Scalar）、枚舉（Enum）

• 參數化查詢與引數（Arguments）

• 實作：定義使用者與貼文的基本 Schema

第三章：Query 查詢操作（約 10 分鐘）

• 基本查詢語法與巢狀查詢

• 欄位選擇與資料精準獲取

• 引數傳遞與條件查詢

• 實作：查詢使用者貼文清單及其作者資訊

第四章：Resolvers 實現與資料來源（約 10 分鐘）

• Resolver 函式的設計概念與執行流程

• 連接不同資料來源：陣列、資料庫、外部 API

• 父子物件間的資料關聯處理

• 實作：建立使用者與貼文 Resolver 邏輯

第五章：Mutation 修改操作（約 10 分鐘）

• Mutation 語法與資料修改流程

• 回傳更新後的完整資料結構

• 錯誤處理與輸入驗證

• 實作：新增使用者、建立貼文等變更操作

第六章：前端整合與 Apollo Client（約 10 分鐘）

• GraphQL 客戶端簡介：Apollo Client、Relay、urql

• 查詢與變更操作的 JavaScript 使用

• 快取管理與即時更新概念

• 實作：React 前端串接 GraphQL API

第七章：迷你專案實作（約 10 分鐘）

專案主題：簡易部落格 API

• Schema：User、Post、Comment 三層結構

• Query：獲取貼文清單與詳細內容

• Mutation：新增貼文與留言

• 前端展示：完整查詢與表單操作流程

第八章：延伸應用與課程總結（約 5 分鐘）

• GraphQL 進階主題：Schema 縫合（Schema Stitching）、聯邦架構（Federation）

• 效能優化：批次載入（Batching）、延遲載入（DataLoader）

• 工具生態：GraphQL Playground、Apollo Studio

• 部署與生產環境：Hasura、GraphCMS、AWS AppSync