TakeShape的联合创始人Andrew Sprouse在纽约的JAMstack聚会介绍了GraphQL。
什么是GraphQL？
模式定义+查询语言+解析框架
架构
- 提供数据的强类型描述
- 架构描述语言（SDL）是指定架构的推荐跨平台方式。
enum Title {
ACTOR
DIRECTOR
}
type Role {
characterName: String!
title: Title
movie: Movie
}
type Person {
name: String!
photo: String
filmography: [Role]
}
type Movie {
title: String!
watched: Boolean
rating: Float
poster: String
actors: [Person]!
director: Person!
year: String
}
|
GraphQL Schema还指定了如何使用查询和突变与数据进行交互：type Query {
listMovies: [Movie]
}
type Mutation {
addMove(title: String): [Movie]
removeMovie(title: String): [Movie]
}
|
查询Langauge
查询您的数据并准确获取您需要的内容：
query {
getToWatchList {
watched
movie {
title
year
director
}
}
}
|
{
"data": {
"getToWatchList": [
{
"watched": true,
"movie": {
"title": "Top Gun",
"year": "1985",
"director": "Tony Scott"
}
},
{
"watched": true,
"movie": {
"title": "Big Trouble in Little China",
"year": "1986",
"director": "John Carpenter"
}
},
{
"watched": true,
"movie": {
"title": "The Princess Bride",
"year": "1987",
"director": "Rob Reiner"
}
},
{
"watched": false,
"movie": {
"title": "Taxi Driver",
"year": "1976",
"director": "Martin Scorsese"
}
}
]
}
}
|
修改数据
mutation {
addMovieToWatch(title: "Die Hard") {
watched
movieTitle
movie {
title
year
director
}
}
}
{
"data": {
"addMovieToWatch": [
{
"watched": false,
"movie": {
"title": "Taxi Driver",
"year": "1976",
"director": "Martin Scorsese"
}
},
{
"watched": false,
"movie": {
"title": "Die Hard",
"year": "1988",
"director": "John McTiernan"
}
}
]
}
}
|
实现框架
- 每个GraphQL实现都提供自己的查询解析框架
- GraphQL.js是参考实现
- 执行查询和变异解析
架构（SDL）
type Query {
getToWatchList: [ToWatch]
}
type Mutation {
addMovieToWatch(title: String!): [ToWatch]
removeMovieToWatch(title: String!): [ToWatch]
markMovieWatched(title: String! watched: Boolean!): [ToWatch]
}
|
解析器
const resolvers = {
Query: {
getToWatchList: () => {
return WatchList.list();
}
},
Mutation: {
addMovieToWatch(_, {title}) {
return WatchList.add(title);
},
removeMovieToWatch(_, {title}) {
return WatchList.remove(title);
},
markMovieWatched(_, {title, watched}) {
return WatchList.markWatched(title, watched);
}
}
};
|
解析器还能够解析动态计算字段
架构（SDL）
type Move {
title: String
rating: Float
poster: String
actors: String
director: String
year: String
}
type ToWatch {
movieTitle: String!
movie: Movie
watched: Boolean!
}
|
解析器
const resolvers = {
ToWatch: {
async movie(toWatch) {
const info = await fetchMovieInfo(toWatch.movieTitle);
return info ? {
title: info.Title,
rating: info.imdbRating,
poster: info.Poster,
year: info.Year,
actors: info.Actors,
director: info.Director
} : null
}
}
};
|