摘要：實(shí)踐由于是一種規(guī)范，它不是一種實(shí)現(xiàn)，如果要自己實(shí)現(xiàn)還是比較難的，不用擔(dān)心，強(qiáng)大的開源社區(qū)已經(jīng)幫我們準(zhǔn)備好了，這就是開源項(xiàng)目。然后執(zhí)行這樣項(xiàng)目就啟動(dòng)了，如下圖注這里存在跨域問題，所以服務(wù)器端需要使用解決跨域問題，具體看代碼。

讓我們先回顧一下我們現(xiàn)在所使用的API設(shè)計(jì)風(fēng)格

優(yōu)點(diǎn)：靈活、解構(gòu)
缺點(diǎn)：由于一個(gè)endpoint對(duì)應(yīng)一個(gè)資源所以需要很多次請(qǐng)求

優(yōu)點(diǎn)：一次請(qǐng)求、所得即所需
缺點(diǎn)：不夠靈活、高度耦合、很高的維護(hù)成本、迭代慢

上面是我們兩種常用的接口方式，兩種都有各自的優(yōu)缺點(diǎn)，有沒有可以包攬所有優(yōu)點(diǎn)的方案呢？我們需要一個(gè)標(biāo)準(zhǔn)的API層，那這就是GraphQL，請(qǐng)注意GraphQL是一個(gè)規(guī)范，是由facebook倡導(dǎo)的一個(gè)規(guī)范，不是一個(gè)實(shí)現(xiàn)。
GraphQL有下面三個(gè)定義：

一個(gè)用來(lái)描述數(shù)據(jù)類型和關(guān)系的API定義語(yǔ)言

一個(gè)可以描述具體需要獲取哪些數(shù)據(jù)的查詢語(yǔ)言

一個(gè)可以resolve到數(shù)據(jù)單個(gè)屬性的可執(zhí)行模型

GraphQL是長(zhǎng)什么樣子的呢？

可能這樣看起來(lái)還比較難理解，沒事，我們直接coding。

由于GraphQL是一種規(guī)范，它不是一種實(shí)現(xiàn)，如果要自己實(shí)現(xiàn)還是比較難的，不用擔(dān)心，強(qiáng)大的開源社區(qū)已經(jīng)幫我們準(zhǔn)備好了，這就是Apollo開源項(xiàng)目。Apollo提供了豐富的后端實(shí)現(xiàn)（node支持：express、koa、hapi、restify等框架）和前端（React、RN、Angular、IOS、Android等）實(shí)現(xiàn)。官方文檔：http://dev.apollodata.com/too...。下面的實(shí)踐都是基于Apollo以nodejs的Express框架來(lái)實(shí)現(xiàn)的。
Demo代碼：https://github.com/jasondu/ap...

搭建服務(wù)器

import express from "express";
import { 
  graphqlExpress, 
  graphiqlExpress, 
} from "apollo-server-express";
import bodyParser from "body-parser";
import schema from "./data/schema";    // 定義GraphQL查詢格式

const GRAPHQL_PORT = 3002;

const graphQLServer = express();

graphQLServer.use("/graphql", bodyParser.json(), graphqlExpress({ schema }));    // 實(shí)現(xiàn)GraphQL接口功能
graphQLServer.use("/graphiql", graphiqlExpress({ endpointURL: "/graphql" }));    // 實(shí)現(xiàn)GraphQL瀏覽器調(diào)試界面

graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphiQL is now running on http://localhost:${GRAPHQL_PORT}/graphiql`
));

懂Express的童鞋應(yīng)該都可以看到上面的代碼，我做一下解釋：

apollo-server-express 是由Apollo提供在express環(huán)境下實(shí)現(xiàn)grapql的庫(kù)，這里使用了里面兩個(gè)類

graphqlExpress是實(shí)現(xiàn)grapql接口功能的類

graphiqlExpress是實(shí)現(xiàn)grapql瀏覽器調(diào)試界面（An in-browser IDE for exploring GraphQL.）的類，就多了一個(gè)“i”，這個(gè)調(diào)試界面可以在后面看到

schema就是上文講的是定義GraphQL查詢格式的

編寫Schema

讓我們看看Schema.js是怎么寫的

import {
  makeExecutableSchema,
} from "graphql-tools";
import resolvers from "./resolvers";

// 定義schema
const typeDefs = `
type Author {   # 作者的字段有：id，名字，還有 發(fā)表的帖子
  id: Int
  firstName: String
  lastName: String
  posts: [Post]
}
type Post {    # 帖子的字段有下面這些，包括 這個(gè)帖子是哪個(gè)作者寫的
  id: Int
  title: String
  text: String
  views: Int
  author: Author
}
type Query {    # 定義查詢內(nèi)容
  author(firstName: String, lastName: String): Author # 查詢作者信息
  getFortuneCookie: String
}
`;

const schema = makeExecutableSchema({ typeDefs, resolvers });

export default schema;

這里用到Apollo提供的makeExecutableSchema方法，這個(gè)方法是將Schema結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換成GraphQLSchema實(shí)例。
typeDefs里面定義了三個(gè)格式Author,Post,Query，這里Query就是查詢的時(shí)候返回的結(jié)構(gòu)，Author,Post是解釋了在Query中的結(jié)構(gòu)類型。
接下來(lái)，我們就可以編寫具體的實(shí)現(xiàn)了。

編寫Resolvers

const resolvers = {
  Query: {
    author(root, args){    // args就是上面schema中author的入?yún)?      return { id: 1, firstName: "Hello", lastName: "World" };
    },
  },
  Author: {
    // 定義author中的posts
    posts(author){
      return [
        { id: 1, title: "A post", text: "Some text", views: 2},
        { id: 2, title: "Another post", text: "Some other text", views: 200}
      ];
    },
  },
  Post: {
    // 定義Post里面的author
    author(post){
      return { id: 1, firstName: "Hello", lastName: "World" };
    },
  },
};

export default resolvers;

上面這段代碼比較簡(jiǎn)單，就不做解釋了。
至此，我們就完成了一個(gè)GraphQL服務(wù)端的開發(fā)，加下來(lái)我們npm i & npm start

吶，這樣就啟動(dòng)啦！打開http://localhost:3002/graphiql就可以看到剛才前面說(shuō)的graphiql，就是GraphQL瀏覽器調(diào)試界面。

graphiql可以支持聯(lián)想功能，可以非常快的書寫查詢語(yǔ)句。

使用create-react-app創(chuàng)建一個(gè)項(xiàng)目，并且按照Apollo客戶端解決方案庫(kù)：react-apollo

create-react-app client & yarn add react-apollo

修改App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

// -------- 添加內(nèi)容 -------- //
import {
  ApolloClient,
  ApolloProvider,
  createNetworkInterface,
  gql,
  graphql,
} from "react-apollo";

// 設(shè)置接口地址
const networkInterface = createNetworkInterface({ uri: "http://localhost:3002/graphql" });

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

const Test = ({ data: { loading, error, author } }) => {
  if (loading) {
    return 
Loading ...
;
  }
  if (error) {
    return 
{error.message}
;
  }

  return (
    
{author.firstName} {author.lastName}
  );
};
// 查詢語(yǔ)句
const query = gql`
  query AuthorQuery {
    author (firstName: "firstName", lastName: "lastName") {
      firstName,
      lastName
    }
  }
`;

const Gtest = graphql(query)(Test);

// -------- 添加內(nèi)容 -------- //

class App extends Component {
  render() {
    return (
      
        

          

            
            
          
          

            To get started, edit src/App.js and save to reload.
        
        
      
    );
  }
}


export default App;

這里的寫法跟redux類似，使用包裹項(xiàng)目，通過(guò)graphql方法將數(shù)據(jù)注入到組件中。

然后執(zhí)行yarn start 這樣項(xiàng)目就啟動(dòng)了，如下圖

注：這里存在跨域問題，所以服務(wù)器端需要使用cors解決跨域問題，具體看代碼。

https://dev-blog.apollodata.c...

《Tutorial: How to build a GraphQL server》講解了如何搭建node GraphQL服務(wù)器，如何定義schema，還有如何鏈接以前的SQL數(shù)據(jù)庫(kù)，rest等，入門必讀

https://dev-blog.apollodata.c...

《Full-stack React + GraphQL Tutorial》講解如何和客戶端結(jié)合起來(lái)，還有如果實(shí)現(xiàn)ws實(shí)時(shí)通信等

https://launchpad.graphql.com...

這個(gè)是apollo提供的線上編輯器，可以在線上編寫schema和resolve，然后可以下載下來(lái)部署

https://www.howtographql.com/

這個(gè)網(wǎng)站詳細(xì)講解了如何在各種服務(wù)器客戶端使用graphql

http://taobaofed.org/blog/201...

《Node.js 服務(wù)端實(shí)踐之 GraphQL 初探》阿里在15年寫的文章

http://graphql.org/官網(wǎng)