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

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

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

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

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

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

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

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

// 使用vue-cli初始化項(xiàng)目
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                    // 對(duì)Apollo-client封裝
└── webpack.config.js

接下來(lái)對(duì)apollo-client進(jìn)行封裝，加上中間件（實(shí)現(xiàn)類(lèi)似于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時(shí)對(duì)請(qǐng)求進(jìn)行處理
  console.log("Middleware", operation, forward)
})
const Afterware = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    // 服務(wù)器返回?cái)?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", // 配置請(qǐng)求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

具體實(shí)現(xiàn)就不貼出來(lái)了，全部代碼已經(jīng)放到github，歡迎star。
run的時(shí)候有記得把token換成自己的，因?yàn)槲业膖oken有可能已經(jīng)失效。

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

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

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

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

基于偏移量的分頁(yè)實(shí)現(xiàn)簡(jiǎn)單，但存在以下問(wèn)題：

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

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

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

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

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

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

所以我們需要同時(shí)支持這兩種分頁(yè)。

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