GraphQL案例演示
摘要：
TakeShape的聯合創始人Andrew Sprouse在紐約的JAMstack聚會介紹了GraphQL。
什麼是GraphQL？
模式定義+查詢語言+解析框架
架構
提供資料的強型別描述
架構描述語言（SDL）是指定架構的推薦跨平臺方式。
...
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
}
}
}
{
<font>"data"</font><font>: {
</font><font>"getToWatchList"</font><font>: [
{
</font><font>"watched"</font><font>: <b>true</b>,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"Top Gun"</font><font>,
</font><font>"year"</font><font>: </font><font>"1985"</font><font>,
</font><font>"director"</font><font>: </font><font>"Tony Scott"</font><font>
}
},
{
</font><font>"watched"</font><font>: <b>true</b>,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"Big Trouble in Little China"</font><font>,
</font><font>"year"</font><font>: </font><font>"1986"</font><font>,
</font><font>"director"</font><font>: </font><font>"John Carpenter"</font><font>
}
},
{
</font><font>"watched"</font><font>: <b>true</b>,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"The Princess Bride"</font><font>,
</font><font>"year"</font><font>: </font><font>"1987"</font><font>,
</font><font>"director"</font><font>: </font><font>"Rob Reiner"</font><font>
}
},
{
</font><font>"watched"</font><font>: false,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"Taxi Driver"</font><font>,
</font><font>"year"</font><font>: </font><font>"1976"</font><font>,
</font><font>"director"</font><font>: </font><font>"Martin Scorsese"</font><font>
}
}
]
}
}
</font>
修改資料
mutation {
addMovieToWatch(title: <font>"Die Hard"</font><font>) {
watched
movieTitle
movie {
title
year
director
}
}
}
{
</font><font>"data"</font><font>: {
</font><font>"addMovieToWatch"</font><font>: [
{
</font><font>"watched"</font><font>: false,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"Taxi Driver"</font><font>,
</font><font>"year"</font><font>: </font><font>"1976"</font><font>,
</font><font>"director"</font><font>: </font><font>"Martin Scorsese"</font><font>
}
},
{
</font><font>"watched"</font><font>: false,
</font><font>"movie"</font><font>: {
</font><font>"title"</font><font>: </font><font>"Die Hard"</font><font>,
</font><font>"year"</font><font>: </font><font>"1988"</font><font>,
</font><font>"director"</font><font>: </font><font>"John McTiernan"</font><font>
}
}
]
}
}
</font>
實現框架
- 每個GraphQL實現都提供自己的查詢解析框架
- GraphQL.js是參考實現
- 執行查詢和變異解析
架構（SDL）
type Query {
getToWatchList: [ToWatch]
}
type Mutation {
addMovieToWatch(title: String!): [ToWatch]
removeMovieToWatch(title: String!): [ToWatch]
markMovieWatched(title: String! watched: Boolean!): [ToWatch]
}
解析器
<b>const</b> resolvers = {
Query: {
getToWatchList: () => {
<b>return</b> WatchList.list();
}
},
Mutation: {
addMovieToWatch(_, {title}) {
<b>return</b> WatchList.add(title);
},
removeMovieToWatch(_, {title}) {
<b>return</b> WatchList.remove(title);
},
markMovieWatched(_, {title, watched}) {
<b>return</b> 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!
}
解析器
<b>const</b> resolvers = {
ToWatch: {
async movie(toWatch) {
<b>const</b> info = await fetchMovieInfo(toWatch.movieTitle);
<b>return</b> info ? {
title: info.Title,
rating: info.imdbRating,
poster: info.Poster,
year: info.Year,
actors: info.Actors,
director: info.Director
} : <b>null</b>
}
}
};