GraphQL案例演示
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> } } };