GraphQL 學習筆記 - 基礎篇
介紹
GraphQL 是一種為 API 設計的資料查詢(修改)的語言，使得 client 端可以使用更直覺且彈性的語法來取得或修改資料。 Facebook 為了因應跨裝置及開發 News Feed 功能而開發
輪廓
流程由上到下
- Schema: Server 端撰寫的一個規範
- Query: Client 端根據 Schema 規範撰寫的 query 請求
- Server Response: Server 根據 query 請求返回給 Client 端資料
Schema
type Query {
hello: String!
}
Query
query {
hello
}
Server Response
{
"data": {
"hello": "world"
}
}
優點
- 精準資料取得
- 程式即文檔
- 前端控制權提升
- 強型別
缺點
- 過於自由、規範少
- 學習成本
- Server Side Caching 實作複雜
生態圈
GraphQL 生態圈非常大，基本上你能想到的語言都支援，這邊主要以 Javascript 來說明，可以參考官網 Javascript 清單，除了原生的以外，最著名的大概就是 Apollo Server/Client，主要是內部時做了很多知名 Nodejs Framework 的相容層，讓開發者能夠更快將 GraphQL 與原來熟悉的技術做結合使用
基礎 Query
Object vs Scalar
在使用 query 時需要注意，type 分為 Object Type, Scalar Type，前者在 query 取得時必須展開，後者則不需要，例如下面範例中 User 就是一個 Object Type，而 String 則是 Scalar Type
type User {
id: ID!
name: String
}
"Query 是最上層的"
type Query {
hello: String
me: User
}
在進行 query 時，必須要把 Object Type 明確展開
query {
hello
me {
id
name
}
}
原理
query 進行時，實際上是使用 HTTP Post method 把 query 請求轉為 header 字串送到 Server，Server 收到後會解析成 AST 格式，並且驗證欄位，只有 解析, 驗證 都通過後才會正式進行 執行
Apollo Server 基礎
以下是 Apollo Server 最基本的建立方式，若想看看一個基礎 GraphQL Blog 範例，可以點連結參考看看
const { ApolloServer, gql } = require('apollo-server');
// 1. GraphQL Schema 定義
const typeDefs = gql`
type Query {
"A simple type for getting started!"
hello: String
}
`;
// 2. Resolvers 是一個會對照 Schema 中 field 的 function map ，讓你可以計算並回傳資料給 GraphQL Server
const resolvers = {
Query: {
// 需注意名稱一定要對到 Schema 中 field 的名稱
hello: () => 'world'
}
};
// 3. 初始化 Web Server ，需傳入 typeDefs (Schema) 與 resolvers (Resolver)
const server = new ApolloServer({
// Schema 部分
typeDefs,
// Resolver 部分
resolvers
});
// 4. 啟動 Server
server.listen().then(({ url }) => {
console.log(`? Server ready at ${url}`);
});