摘要： 體驗神奇的GraphQL!
原文：GraphQL 入門詳解
作者：MudOnTire
Fundebug經授權轉載，版權歸原作者所有。
一種用于API調用的資料查詢語言
傳統的api調用一般擷取到的是後端組裝好的一個完整對象，而前端可能隻需要用其中的某些字段，大部分資料的查詢和傳輸工作都浪費了。graphQL提供一種全新資料查詢方式，可以隻擷取需要的資料，使api調用更靈活、高效和低成本。
需要什麼就擷取什麼資料
支援關系資料的查詢
API無需定義各種路由，完全資料驅動
無需管理API版本，一個版本持續演進
支援大部分主流開發語言和平台
強大的配套開發工具
下面我們通過搭建一個SpaceX的新聞網站來直覺學習graphQL的基本使用方法，所有資料由 官方API 獲得。
服務端采用node + express。建立一個node項目，安裝如下依賴：
建立入口檔案 <code>server.js</code>，裡面建立express服務。使用graphQL我們隻需要設定一個路由，所有的請求都由這個graphQL的request handler處理：
graphqlHTTP是grapql的http服務，用于處理graphql的查詢請求，它接收一個options參數，其中schema是一個 <code>GraphQLSchema</code>執行個體，我們接下來定義，graphiql設定為true可以在浏覽器中直接對graphQL進行調試。更多express-graphql的用法請參考 Github express-graphql。
接下來我們定義schema，schema意為‘模式’，其中定義了資料模型的結構、字段的類型、模型間的關系，是graphQL的核心。
建立<code>schema.js</code>檔案，首先定義兩個資料模型：LaunchType（發射）和 RocketType（火箭）。注意字段的資料類型需要使用GraphQL定義的，不能使用js中的基本資料類型。
有了資料模型之後，我們需要從資料庫或者第三方API擷取資料，在此我們從spacex的官方API擷取。我們需要定義一個root query，root query做為所有查詢的入口，處理并傳回資料，更多請參考 GraphQL Root fields & resolvers。
在 <code>schema.js</code>中增加代碼：
完成這一步，服務端api基本搭建完成！我們看一下效果，在浏覽器中輸入 http://localhost:5000/graphql 将打開 Graphiql（生産環境建議禁用）：
我們可以隻查詢所有的 <code>flight_number</code>：
或者更多的屬性：
是不是很簡單很神奇！
我們也可以通過傳入參數查詢單條資訊：
結果：
推薦大家使用Fundebug，一款很好用的BUG監控工具~
剛剛我們都是用GraphiQL在浏覽器調用接口，接下來我們看一下在前端頁面中怎麼調用graphql服務。前端我們使用react。
在項目根目錄初始化react項目：
為了便于調試，在<code>package.json</code>中增加scripts：
樣式我們使用bootswatch中的一款主題：
GraphQL的用戶端有多種實作，本次項目使用 Apollo，最流行的GraphQL Client。更多client請參考 GraphQL Clients。
安裝如下依賴：
其中 <code>apollo-boost</code> 是apollo client本身，<code>react-apollo</code> 是react視圖層的內建，<code>graphql</code> 用于解析graphql的查詢語句。
修改<code>App.js</code>内容如下：
和redux使用<code>&lt;Provider&gt;</code>傳遞store類似，<code>react-apollo</code> 通過 <code>&lt;ApolloProvider&gt;</code>将apollo client向下傳遞。
接着我們來實作顯示launches的component，新增檔案 <code>components/Launches.js</code>：
query語句通過 <code>graphql-tag</code> 定義，傳入 <code>&lt;Query&gt;</code> 執行擷取資料并傳入 <code>LaunchItem</code> 顯示。
<code>components/LaunchItem.js</code>:
查詢語句通過<code>graphql-tag</code>定義，然後傳入<code>&lt;Query&gt;</code>執行。
由于本地調試，client和server分别運作在不同的端口，是以需要先進行跨域處理，使用 cors。
好了，大功告成，我們來看一下效果：
今天就主要介紹GraphQL工程的搭建和GraphQL Query的使用，更多關于GraphQL的内容比如 Mutation下次有空會跟大家逐漸講解。
本文靈感來源：Youtube@Traversy Media，感謝
本文Demo Github位址：Github@MudOnTire
本文Demo線上展示：Heroku@graphql-spacex-launches
最後，推薦大家使用Fundebug，一款很好用的BUG監控工具~
Fundebug專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等衆多品牌企業。歡迎大家免費試用！