摘要：初始化項目使用初始化項目安裝項目結(jié)構(gòu)如下接口所有接口對封裝接下來對進(jìn)行封裝，加上中間件實現(xiàn)類似于攔截器的效果。

在只學(xué)習(xí)graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實現(xiàn)graphql的server端來進(jìn)行練手。
graphql社區(qū)提供了graphiql讓我們使用

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

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

關(guān)于graphql的基礎(chǔ)知識可以去這里看看

graphql在前端實現(xiàn)有以下方案。

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

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

// 使用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進(jìn)行封裝，加上中間件（實現(xiàn)類似于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時對請求進(jìn)行處理
  console.log("Middleware", operation, forward)
})
const Afterware = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    // 服務(wù)器返回數(shù)據(jù)
    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下添加以下規(guī)則
      {
        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})

到這里我們已經(jīng)可以直接調(diào)用/graphql/下導(dǎo)出的function

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

graphql實現(xiàn)分頁有以下兩種方式：

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

基于游標(biāo)或者id，提供每頁數(shù)量，與 游標(biāo)/id。

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

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

性能問題，雖然可以使用 “延遲關(guān)聯(lián)” 解決，但會使sql語句變得復(fù)雜

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

刪除列表數(shù)據(jù)時，導(dǎo)致獲取下一頁的數(shù)據(jù)缺失

# 假設(shè) 總共有11條數(shù)據(jù)，一頁顯示10條，總頁數(shù)為 2 頁。
# 當(dāng)調(diào)用接口刪除 第 1 頁的 1 條數(shù)據(jù)，然后進(jìn)行翻頁時，因為只剩下10條數(shù)據(jù)，所以下面的sql會查不到數(shù)據(jù)。
SELECT id, name FROM product LIMIT 10, 10;

基于游標(biāo)/ID 的分頁，也存在硬傷：

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

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

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