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)合併

Apollo client 有一個可插拔的網絡接口層, 它讓你可以配置查詢如何經過HTTP進行發送, 或者經過Websocket, 或者使用客戶端模擬數據.

配置網絡接口

要建立一個網絡接口使用 createNetworkInterface

下面的示例用自定義端點初始化一個新的Client:

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: 'https://example.com/graphql' });

const client = new ApolloClient({
  networkInterface,
});

若是須要, 還能夠傳遞額外的選項給fetch:

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ 
  uri: 'https://example.com/graphql',
  opts: {
    // Additional fetch options like `credentials` or `headers`
    credentials: 'same-origin',
  }
});

const client = new ApolloClient({
  networkInterface,
});

中間件(Middleware)

注: 中間件的概念和Windows編程中的鉤子概念相似.

createNetworkInterface建立的網絡接口還能夠和中間件一塊兒使用, 中間件用於在請求發送到服務器以前修改請求. 要使用中間件, 須要傳遞一個對象數組給 networkInterface 的 use 函數, 每一個對象必須包含有以下參數的 applyMiddleware方法:

• req: object

  由中間件處理的HTTP請求對象.

• next: function

  該函數把請求對象往下傳遞(傳遞到下一個中間件, 若是有多箇中間件).

  下面的例子, 顯示瞭如何傳遞一個身份驗證Token給HTTP請求的Header.

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // 若是須要, 建立 header 對象.
    }
    req.options.headers['authorization'] = localStorage.getItem('token') ? localStorage.getItem('token') : null;
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,
});

下面的例子顯示如何使用多箇中間件:

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: '/graphql' });
# 用於請求GraphQL服務器的身份標識
const token = 'first-token-value';
const token2 = 'second-token-value';

# 第一個中間件
const exampleWare1 = {
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the headers object if needed.
    }
    req.options.headers['authorization'] = token;
    next();
  }
}

# 第二個中間件
const exampleWare2 = {
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the headers object if needed.
    }
    req.options.headers['authorization'] = token2;
    next();
  }
}

# 以對象數組的方式傳遞
networkInterface.use([exampleWare1, exampleWare2]);

# 初始化客戶端
const client = new ApolloClient({
  networkInterface,
});

Afterware

Afterware 用戶請求發送後, 而且HTTP響應從服務器返回的時候, 通常用於處理HTTP請求的響應. 與中間件不一樣的是, applyAfterware 方法的參數不一樣:

• { response }: object

  一個HTTP響應對象.

• next: function

  傳遞HTTP響應到下一個 `afterware`.

注: 這個我以爲應該叫作 ResponseHandlers 好像更容易理解. 同理以前的中間件能夠稱做 RequestHandlers

下面是一個 Afterware 的例子:

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import {logout} from './logout';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

# 這裏使用的是 useAfter
networkInterface.useAfter([{
  applyAfterware({ response }, next) {
    if (response.status === 401) {
      logout();
    }
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,
});

多個Afterware的例子:

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import {redirectTo} from './redirect';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

const exampleWare1 = {
  applyAfterware({ response }, next) {
    if (response.status === 500) {
      console.error('Server returned an error');
    }
    next();
  }
}

const exampleWare2 = {
  applyAfterware({ response }, next) {
    if (response.status === 200) {
      redirectTo('/');
    }
    next();
  }
}

networkInterface.useAfter([exampleWare1, exampleWare2]);

const client = new ApolloClient({
  networkInterface,
});

Chaining (鏈起來)

networkInterface.use([exampleWare1])
  .use([exampleWare2])
  .useAfter([exampleWare3])
  .useAfter([exampleWare4])
  .use([exampleWare5]);

自定義網絡接口

能夠自定義以不一樣的方式向GraphQL服務器發送查詢或數據更新請求, 這樣作有幾個緣由:

• 替換傳輸層, 好比用Websocket替換默認的HTTP, 下降Web應用的延遲. 加強Web應用的流程度, 提高用戶體驗等.

• 請求發送前須要修改查詢和變量

• 開發階段的純客戶端模式, 模擬服務器的響應

Query batching

Query batching 是這樣一個概念, 當多個請求在一個特定的時間間隔內產生時(好比: 100毫秒內), Apollo 會把多個查詢組合成一個請求, 好比在渲染一個包含導航條, 邊欄, 內容等帶有GraphQL查詢的組件時, Query batching 要求服務支持 Query batching(好比 graphql-server).

使用Query batching, 要傳遞BatchedNetworkInterface給ApolloClient構造函數, 例如:

import ApolloClient, { createBatchingNetworkInterface } from 'apollo-client';

const batchingNetworkInterface = createBatchingNetworkInterface({
  uri: 'localhost:3000',
  batchInterval: 10,
  opts: {
    // 傳遞給`fetch`的選項
  }
});

const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,
});

apolloClient.query({ query: firstQuery });
apolloClient.query({ query: secondQuery });

Query batching 是怎麼工做的

Query batching 是傳輸層機制, 須要服務器的支持(好比 graphql-server, 若是服務器不支持, 請求會失敗. 若是服務器打開了 Query batching, 多個請求會組合到一個數組中:

[{
   query: `query Query1 { someField }`,
   variables: {},
   operationName: 'Query1',
 },
 {
   query: `query Query2 ($num: Int){ plusOne(num: $num) }`,
   variables: { num: 3 },
   operationName: 'Query2',
 }]

查詢去除重複(Query deduplication)

查詢去重能夠減小發送到服務器的查詢數量, 默認關閉, 可經過queryDeduplication選項傳遞給ApolloClient構造函數開啓, 查詢去重發送在請求到達網絡層以前.

const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,
  queryDeduplication: true,
});

查詢去重在多個組件顯示相同數據的時候很是有用. 避免從服務器屢次獲取相同的數據.

接口

這裏有幾個和網絡請求相關的接口, 經過這些接口, 你能夠自定義如何處理網絡請求和響應

http://dev.apollodata.com/cor...