淺淺地談 GraphQL
GraphQL - A Query Language for APIs
GraphQL is a new API standard that provides a more efficient, powerful and flexible alternative to REST. It was developed and open-sourced by Facebook and is now maintained by a large community of companies and individuals from all over the world. At its core, GraphQL enables declarative data fetching where a client can specify exactly what data it needs from an API. Instead of multiple endpoints that return fixed data structures, a GraphQL server only exposes a single endpoint and responds with precisely the data a client asked for.
這是官方關於 GraphQL 的介紹，濃縮成一句話解釋： an API defines how a client can load data from a server
大概可以達到這些優點：
① It lets the client specify exactly what data it needs. / 由前端決定需要哪些資料 ② It uses a type system to describe data. / 資料是具有嚴謹的型態規範 ③ It makes it easier to aggregate data from multiple sources. / 只需要單一的 API 埠
GraphQL is the better REST
跟傳統的 REST 的相比，可以用這張圖解釋：
根據 REST 的做法，我們依照每一個 Resource 為單位（通常 depend on 資料庫的表格）。也就是說，前端需要一個資源時即需要呼叫一次 API，N 個資源時需要呼叫 N 次。可能會隱性的增加 Request 與增加新資源的開發成本。 RESTFul 分為幾個階段：Request → URL Route → Handle Controller -> Multiple Endpoint
在 GraphQL 的架構中將 URL Route → Handle Controller 的動作直接壓縮設計在 API 中透過 Schema 跟 Resolver 取代，將 Resources 視為是一個 Graph，僅需要透過 One Endpoint API 就可以做到對資料存取的操作。像這樣使用：
為什麼要用 GraphQL？
目前應用程式的發展是很快速的，資料的定義也很難在一開始就設定得很完美，很常都是前、後端同時開發同時串接。而因為 API 的興起，一個後端通常需要應付很多前端平臺，像是網頁前、後臺、Android、iOS app 之類的。多個呈現畫面的前端平臺仰賴於一個後端與一個資料庫的來源，RESTFul 其實是一個相對舒適的被動解法。反正後端就是開好在那邊，請大家依照檔案各取所需就好。但是隨著開發時程拉長、規模變大之後，會發現不同的前端可能會有不同的要求，此時後端可能就需要一個每個來源進行調整或是吵架 (?)
GraphQL 可以優雅地處理這個問題，大概有以下幾點好處：
① No more Over and Less - Overfetching and Underfetching / 前端需要什麼自己決定，可以避免 Response 太肥或不足的問題 ② Benefits of a Schema & Type System / 資料型別的定義可以讓達到初步的驗證效果 ③ Rich open-source ecosystem and an amazing community / 開源的社群資料很多，也有許多有趣的配套解法可以混搭
Thinking in graphs
前面有提到， GraphQL 將資源視為一個 Graph，這邊的資源可以想成是資料庫中的每一種資料。
怎麼開始、怎麼使用
GraphQL 由幾個部分所組成：
- TypeDefs
- Resolvers
- Queries (Query、Mutation)
- Schema
=> API contain Schema contain Queries contain TypeDefs and Resolvers
TypeDefs
資料可以定義成下面這樣子，Query 跟 Mutation 作為 Graph 的 Root，其中在包含 Resource 的組合：
type Query {
person: person!
persons: [person]
}
type Mutation {
create(name: String!, age: Int!): String
}
type Person {
name: String!
age: Int!
}
複製程式碼
每一種資料都可以設定屬性與型別，可以當作初步的驗證！
Resolvers
可以想成一個 Function，負責解析怎樣的需求該對應怎樣的操作。
Queries (Query、Mutation)
Queries 分為 Query、Mutation 兩種，定義前端的 API 要如何跟後端溝通。
- Fetching Data with Queries
query {
Person(last: 1) {
name
},
Persons {
id
name
}
}
# Return:
# {
# "data": {
# "Person": {
# name: "Sarah"
# },
# "Persons": [{
# "id": 1, "name": "Johnny"
# }, {
# "id": 2, "name": "Sarah"
# }]
# }
# }
複製程式碼
- Writing Data with Mutations
mutation {
create(name: "Bob", age: 36) {
id
}
}
# Return:
# {
# "data": {
# "create": {
# "id": 3
# }
# }
# }
複製程式碼
Schema
Schema 定義 API 的抽象層，將最上層的 Query Root 往下視為一個 API Graph。
簡單總結如下：
- TypeDefs ➞ 定義資料 & Query 的型態
- Resolvers ➞ 定義操作資料的方式
- Queries (Query、Mutation) ➞ 資料操作的最上層
- Schema ➞ 定義 API 的抽象層
實踐第一個 GraphQL Server 開始
目前常見的 GraphQL API Server 大概有以下幾種做法與分別來自不同的套件：
graphql graphql graphql-tools apollo-server graphql-yoga
這邊都是以 Node + Express 為範例，也先將資料來源假設是靜態變數，實務應用的時候可以把 Resolver 改為直接存取資料庫的 Function。
第一種寫法：GraphQLObjectType + GraphQLSchema
// 1. 先定義資料來源 & 操作資料的 resolvers
let users = [
{ id: 0, name: 'Tom', sex: 0, },
{ id: 1, name: 'Bob', sex: 0, },
{ id: 2, name: 'Alick', sex: 1, },
];
const userResolver = ({id}) => users.filter(u => u.id == id)[0];
const usersResolver = () => users;
// 2. 利用 GraphQLObjectType 定義 data 的 TypeDefs
const userType = new graphql.GraphQLObjectType({
name: 'user',
fields: {
id: { type: graphql.GraphQLInt },
name: { type: graphql.GraphQLString },
sex: { type: graphql.GraphQLInt },
}
})
const usersType = new graphql.GraphQLList(userType)
// 3. 再利用 GraphQLObjectType 定義 Query 的 TypeDefs 且將 resolvers 定義在其中
const queryType = new graphql.GraphQLObjectType({
name: 'Query',
fields: {
user: {
type: userType,
resolve: (_, args) => userResolver(args),
args: {
id: { type: graphql.GraphQLInt }
},
},
users: {
type: usersType,
resolve: () => usersResolver()
}
}
})
// 4. 利用 GraphQLSchema 將 Query 封裝成 Schema
const schema = new graphql.GraphQLSchema({
query: queryType
});
// 5. 利用 graphqlHTTP 將 Schema 封裝成 API
app.use(
'/',
graphqlHTTP({
schema: schema,
graphiql: true
})
);
複製程式碼
第二種寫法：buildSchema + typeDefs + rootValue
// 1. 先定義資料來源 & 操作資料的 resolvers
let users = [
{ id: 0, name: 'Tom', sex: 0, },
{ id: 1, name: 'Bob', sex: 0, },
{ id: 2, name: 'Alick', sex: 1, },
];
const userResolver = ({id}) => users.filter(u => u.id == id)[0];
const usersResolver = () => users;
const resolvers = {
Query: {
user: (_, args) => userResolver(args),
users: () => usersResolver()
},
}
// 2. 利用 template string 定義 data 跟 Query 的 TypeDefs
const typeDefs = `
type Query {
user(id: Int!): User
users: [User]
},
type User {
id: Int
name: String
sex: Int
}
`;
// 3. 利用 buildSchema 將 Query 封裝成 Schema
const schema = graphql.buildSchema(typeDefs);
// 4. 利用 graphqlHTTP + rootValue 將 Query 與 resolver 串接且封裝成 API
app.use(
'/',
graphqlHTTP({
schema: schema,
rootValue: {
user: userResolver,
users: usersResolver
},
graphiql: true
})
);
複製程式碼
第三種寫法：makeExecutableSchema + typeDefs + resolvers
// 1. 先定義資料來源 & 操作資料的 resolvers
let users = [
{ id: 0, name: 'Tom', sex: 0, },
{ id: 1, name: 'Bob', sex: 0, },
{ id: 2, name: 'Alick', sex: 1, },
];
const userResolver = ({id}) => users.filter(u => u.id == id)[0];
const usersResolver = () => users;
const resolvers = {
Query: {
user: (_, args) => getCourse(args),
users: () => getCourses()
},
}
// 2. 利用 template string 定義 data 跟 Query 的 TypeDefs
const typeDefs = `
type Query {
user(id: Int!): User
users: [User]
},
type User {
id: Int
name: String
sex: Int
}
`;
// 3. 利用 makeExecutableSchema 將 Query 跟 resolver 封裝成 Schema
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});
// 4. 利用 graphqlHTTP 將 Schema 封裝成 API
app.use(
'/',
graphqlHTTP({
schema: schema,
graphiql: true
})
);
複製程式碼
第四種寫法：ApolloServer + typeDefs + resolvers
// 1. 先定義資料來源 & 操作資料的 resolvers
let users = [
{ id: 0, name: 'Tom', sex: 0, },
{ id: 1, name: 'Bob', sex: 0, },
{ id: 2, name: 'Alick', sex: 1, },
];
const userResolver = ({id}) => users.filter(u => u.id == id)[0];
const usersResolver = () => users;
const resolvers = {
Query: {
course: (_, args) => getCourse(args),
courses: () => getCourses()
},
}
// 2. 利用 template string 定義 data 跟 Query 的 TypeDefs
const typeDefs =gql`
type Query {
user(id: Int!): User
users: [User]
},
type User {
id: Int
name: String
sex: Int
}
`;
// 3. 利用 ApolloServer 將 Query 跟 resolver 封裝成 Schema
const server = new ApolloServer({
typeDefs,
resolvers,
});
// 4. 利用 applyMiddleware 將 server 作為 express 的 Middleware API
const app = express();
server.applyMiddleware({ app });
複製程式碼
第五種寫法：GraphQLServer + typeDefs + resolvers
// 1. 先定義資料來源 & 操作資料的 resolvers
let users = [
{ id: 0, name: 'Tom', sex: 0, },
{ id: 1, name: 'Bob', sex: 0, },
{ id: 2, name: 'Alick', sex: 1, },
];
const userResolver = ({id}) => users.filter(u => u.id == id)[0];
const usersResolver = () => users;
const resolvers = {
Query: {
course: (_, args) => getCourse(args),
courses: () => getCourses()
},
}
// 2. 利用 template string 定義 data 跟 Query 的 TypeDefs
const typeDefs = `
type Query {
user(id: Int!): User
users: [User]
},
type User {
id: Int
name: String
sex: Int
}
`;
// 3. 利用 makeExecutableSchema 將 Query 跟 resolver 封裝成 Schema API
const server = new GraphQLServer({
typeDefs,
resolvers,
})
server.start()
複製程式碼
架構與實現
官方將常見的使用案例分為三種，也提出三種可以匯入的方式：
① GraphQL server with a connected database ② GraphQL layer that integrates existing systems ③ Hybrid approach with connected database and integration of existing system
GraphQL 也可以分為前端與後端：
① A GraphQL server that serves your API. => 套件有： Apollo Client、Relay ② A GraphQL client that connects to your endpoint. => 套件有： express-graphql、 apollo-server、 graphql-yoga
除了前後端之外，也可以加一些額外的工具：
- 前端後端間也可以有一個 Cache Gateway： Apollo Engine
- 後端與資料庫間也可以用一個 ORM Layer：Prisma、join-monster
