摘要：初始化項目使用初始化項目安裝項目結構如下接口所有接口對封裝接下來對進行封裝，加上中間件實現類似于攔截器的效果。

在只學習graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實現graphql的server端來進行練手。
graphql社區提供了graphiql讓我們使用

graphiql (npm)：一個交互式的運行于瀏覽器中的 GraphQL IDE.

但graphiql提供的live demo基本打不開，難道剛接觸graphql就要自己實現graphql的server端？
好在github用graphql寫了一套api，我們可以去這里，登陸后即可體驗一把graphql。

關于graphql的基礎知識可以去這里看看

graphql在前端實現有以下方案。

Relay (github) (npm)：Facebook 的框架，用于構建與 GraphQL 后端交流的 React 應用。  
Apollo Client (github)：一個強大的 JavaScript GraphQL 客戶端，設計用于與 React、React Native、Angular 2 或者原生 JavaScript 一同工作。  
graphql-request：一個簡單的彈性的 JavaScript GraphQL 客戶端，可以運行于所有的 JavaScript 環境（瀏覽器，Node.js 和 React Native）—— 基本上是 fetch 的輕度封裝。  
Lokka：一個簡單的 JavaScript GraphQL 客戶端，可以運行于所有的 JavaScript 環境 —— 瀏覽器，Node.js 和 React Native。  
nanogql：一個使用模板字符串的小型 GraphQL 客戶端庫。

從npm download數量上看Apollo Client是最多的，并且Apollo也有服務端的解決方案，所以這里選擇Apollo Client作為graphql的client端
apollo client對于web 框架都有具體的實現，但是我更希望能像axios那樣去使用graphql，而不是每套web框架都要去學一下具體實現，那樣會折騰死自己。

// 使用vue-cli初始化項目
vue init webpack-simple my-project
npm i

npm i apollo-cache-inmemory apollo-client apollo-link apollo-link-http 
npm i graphql graphql-tag

.
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── graphql                            // 接口
│   │   ├── search.graphql
│   │   └── index.js                       // export所有接口
│   ├── main.js
│   └── utils
│       └── graphql.js                    // 對Apollo-client封裝
└── webpack.config.js

接下來對apollo-client進行封裝，加上中間件（實現類似于axios攔截器的效果）。
graphql.js

import ApolloClient from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { HttpLink } from "apollo-link-http"
import { onError } from "apollo-link-error"
import { ApolloLink, from } from "apollo-link"

const token = "598ffa46592d1c7f57ccf8173e47290c6db0d549"

const Middleware = new ApolloLink((operation, forward) => {
  // request時對請求進行處理
  console.log("Middleware", operation, forward)
})
const Afterware = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    // 服務器返回數據
    console.log("Afterware--response", response)
    return response
  })
})
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({
  uri: "https://api.github.com/graphql", // 配置請求url 
  headers: {                             // 配置header
    Authorization: `Bearer ${token}`
  }
})
const cache = new InMemoryCache()       // 緩存
export default new ApolloClient({
  link: from([Middleware, Afterware, errorLink, httpLink]),
  cache
})

配置webpack支持.graphql文件

     // 在rules下添加以下規則
      {
        test: /.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: "graphql-tag/loader",
      }

search.graphql

query searchR ($keyword: String!) {
    search (query: $keyword , type: REPOSITORY){
        userCount
    }
}

在/graphql/index.js export所有接口

import client from "../utils/graphql"
// import gql from "graphql-tag"
import * as searchGql from "./search.graphql"
/** searchGql模塊 **/
export const search = (params) => client.query({query: searchGql.search, variables: params})

到這里我們已經可以直接調用/graphql/下導出的function

具體實現就不貼出來了，全部代碼已經放到github，歡迎star。
run的時候有記得把token換成自己的，因為我的token有可能已經失效。

graphql實現分頁有以下兩種方式：

基于偏移量,需要提供第幾頁， 每頁的數量

基于游標或者id，提供每頁數量，與 游標/id。

對于游標分頁Relay(Facebook家的Graphql庫) 定了一套規范 Relay-style cursor pagination

基于偏移量的分頁實現簡單，但存在以下問題：

性能問題，雖然可以使用 “延遲關聯” 解決，但會使sql語句變得復雜

# 假設 有一個 product商品表，當商品表數量足夠多時，這個查詢會變得非常緩慢，
SELECT id, name FROM product LIMIT 1000, 20;
# 如果我們提供一個邊界值，比如id，無論翻頁到多么后面，其性能都會很好
SELECT id, name FROM product WHERE id > 1000 LIMIT 20;

刪除列表數據時，導致獲取下一頁的數據缺失

# 假設 總共有11條數據，一頁顯示10條，總頁數為 2 頁。
# 當調用接口刪除 第 1 頁的 1 條數據，然后進行翻頁時，因為只剩下10條數據，所以下面的sql會查不到數據。
SELECT id, name FROM product LIMIT 10, 10;

基于游標/ID 的分頁，也存在硬傷：

如何實現跳往第 n 頁的功能
難道要獲取 相應的游標再進行翻頁？ 所以它更適用于無限加載，或者只有 上一頁/下一頁 的情景上,對于跳往第n頁還是需要用到基于偏移量的分頁。

所以我們需要同時支持這兩種分頁。

Relay 定義了 PageInfo，Edges，Edge Types，Node，Cursor等對象 用于實現靈活的分頁。