GraphQL 入門: Apollo Client - 安裝和配置選項

GraphQL 入門: 簡介
GraphQL 入門: Apollo Client - 簡介
GraphQL 入門: Apollo Client - 安裝和配置選項
GraphQL 入門: Apollo Client - 鏈接到數據
GraphQL 入門: Apollo Client - 網絡層
GraphQL 入門: Apollo Client - 開發調試工具
GraphQL 入門: Apollo Client - 持久化GraphQL查詢概要
GraphQL 入門: Apollo Client - 存儲API
GraphQL 入門: Apollo Client - 查詢(Batching)合併

安裝

要在React中使用Apollo, 須要按照apollo-client包, 以及react-apollo集成包, 以及graphql-tag庫用於構造查詢文檔.

npm install react-apollo --save

若是你在一個沒有全局fetch實現的環境中(瀏覽器不支持Fetch API), 請確保安裝 whatwg-fetch 或則

Polyfill是一個英國產品,在美國稱之爲Spackling Paste(譯者注:刮牆的,在中國稱爲膩子).記住這一點就行:把舊的瀏覽器想象成爲一面有了裂縫的牆.這些[polyfills]會幫助咱們把這面牆的裂縫抹平,還咱們一個更好的光滑的牆壁(瀏覽器)

Fetch API 用於代替 XMLHttpRequest
Fetch API 請參考 https://github.github.io/fetch/

初始化

要在React中使用Apollo, 須要建立一個 ApolloClient和一個ApolloProvider.

ApolloClient 用戶管理做爲緩存的查詢存儲, 以及分發查詢結果. ApolloProvider 用於關聯ApolloClient到React組件.

建立一個客戶端

建立一個客戶端示例, 而且指向GraphQL服務器:

import { ApolloClient } from 'react-apollo';
// 默認狀況客戶端會發送到相同主機名(域名)下的/graphql端點
const client = new ApolloClient();

客戶端能夠攜帶各類選項, 在特殊狀況下, 若是你想修改GraphQL服務器的URL, 能夠建立一個自定義的NetworkInterface:

import { ApolloClient, createNetworkInterface } from 'react-apollo';
const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),
});

ApolloClient 還有一些控制客戶端行爲的選項, 在 Use GraphQL with React 文檔中能夠找到.

建立一個Provider

要鏈接客戶端實例到React組件樹, 須要用到ApolloProvider組件. 你須要確保ApolloProvider做爲一個容器去包裹其餘的須要訪問GraphQL服務器數據的React組件.

# 導入須要的模塊

import { ApolloClient, ApolloProvider } from 'react-apollo';

# 實例化 ApolloClient

const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),
});

# 掛載組件

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyRootComponent />
  </ApolloProvider>,
  document.getElementById('App')
)

身份驗證

對於身份驗證, 採用JWT, 把 Token 存儲在瀏覽器的 LocalStorage 裏面, 能夠經過下面的方法, 設置 Authorization 請求頭.

# Middleware, 顧名思義, 中間件, 經常使用的一種修改軟件行爲的模式. 
# Windows 編程叫鉤子(Hooks), 起攔截器的做用, 這裏主要是在請求發出以前, 修改, 增長HTTP請求頭.

networkInterface.use([{
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // 若是須要, 建立 header 對象.
    }
    
    # 設置 JWT TOKEN
    
    if(localStorage.getItem('token')){
      req.options.headers['Authorization'] = 'Login ' + localStorage.getItem('token')
    }
    
    # 注意, 中間件是一個鏈, 若是還須要把請求傳遞給下一個中間件, 這個函數是必須的. 
    # 也能夠用於邏輯判斷, 知足條件, 網下走, 不知足條件中斷流程.
    # if (condition == true) {
    #   next();
    # }
    # else {
    #   console.error("Error: could not meet the condition");
    # }
    next();
  }
}]);

參考資料

• http://dev.apollodata.com/rea...

• Apollo的交互式學習項目