試一試 GraphQL
阿新 • • 發佈：2020-07-20
## GraphQL 簡介
一種用於 API 的查詢語言。
> GraphQL 既是一種用於 API 的查詢語言也是一個滿足你資料查詢的執行時。 GraphQL 對你的 API 中的資料提供了一套易於理解的完整描述，使得客戶端能夠準確地獲得它需要的資料，而且沒有任何冗餘，也讓 API 更容易地隨著時間推移而演進，還能用於構建強大的開發者工具。
對比 restful api:
- restful —個介面只能返回一個資源, graphql 一次可以獲取多個資源。
- restful 用不同的 url 來區分資源, graphql 用型別區分資源。
## 安裝
使用 JavaScript 語言，express node.js 框架開始。
```
npm install express express-graphql graphql
```
建立 server.js 並 使用命令 `node server.js` 執行 demo。
```javascript
const express = require('express');
const app = express();
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type Query {
hello: String
}
`);
const root = { hello: () => 'Hello world!' };
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));
```
## 引數型別
- 基本型別: **String, Int, Float, Boolean, ID**。
- [型別]代表陣列,例如:[Int]代表整型陣列。
## 引數傳遞
- 和 JavaScript 傳遞引數一樣,小括號內定義形參,但是注意 **:** 引數需要定義型別。
- **!** 歎號代表引數不能為空。
```javascript
type Query {
rollDice (numDice: Int!, numSide: Int): [Int]
}
```
## 自定義引數型別
GraphQL 允許使用者自定義引數型別,通常用來描述要獲取的資源的屬性。
```javascript
type Account {
name: String
age: Int
sex: String
department: String
salary: (city: String): Int
}
type Query {
account (name: string): Account
}
```
server.js
```javascript
const schema = buildSchema(`
type Account {
name: String
age: Int
sex: String
department: String
salary(city: String): Int
}
type Query {
hello: String
getClassMates(classNo: Int!): [String]
account (username: String): Account
}
`)
const root = {
hello: () => 'Hello world!',
getClassMates: ({ classNo }) => {
const obj = {
31: ['張三', '李四', '王五'],
61: ['張大三', '李大四', '王大五'],
}
return obj[classNo]
},
account: ({ username }) => {
const name = username
const sex = 'nan'
const age = 10
const department = '開發部'
const salary = ({ city }) => {
if (city === '北京' || city === '上海' || city === '深圳' || city === '廣州') {
return 10000
}
return 3000
}
return {
name,
sex,
age,
department,
salary,
}
},
}
```
## 在客戶端訪問GraphQL介面
在 server.js 公開資料夾 供使用者訪問靜態資源。
```javascript
app.use(express.static('public'))
```
index.html
```html
Document