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

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

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

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

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

一個用來描述數(shù)據(jù)類型和關(guān)系的API定義語言

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

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

GraphQL是長什么樣子的呢？

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

由于GraphQL是一種規(guī)范，它不是一種實現(xiàn)，如果要自己實現(xiàn)還是比較難的，不用擔(dān)心，強大的開源社區(qū)已經(jīng)幫我們準(zhǔn)備好了，這就是Apollo開源項目。Apollo提供了豐富的后端實現(xiàn)（node支持：express、koa、hapi、restify等框架）和前端（React、RN、Angular、IOS、Android等）實現(xiàn)。官方文檔：http://dev.apollodata.com/too...。下面的實踐都是基于Apollo以nodejs的Express框架來實現(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 }));    // 實現(xiàn)GraphQL接口功能
graphQLServer.use("/graphiql", graphiqlExpress({ endpointURL: "/graphql" }));    // 實現(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)境下實現(xiàn)grapql的庫，這里使用了里面兩個類

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

graphiqlExpress是實現(xiàn)grapql瀏覽器調(diào)試界面（An in-browser IDE for exploring GraphQL.）的類，就多了一個“i”，這個調(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 {    # 帖子的字段有下面這些，包括 這個帖子是哪個作者寫的
  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方法，這個方法是將Schema結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換成GraphQLSchema實例。
typeDefs里面定義了三個格式Author,Post,Query，這里Query就是查詢的時候返回的結(jié)構(gòu)，Author,Post是解釋了在Query中的結(jié)構(gòu)類型。
接下來，我們就可以編寫具體的實現(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;

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

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

graphiql可以支持聯(lián)想功能，可以非?？斓臅鴮懖樵冋Z句。

使用create-react-app創(chuàng)建一個項目，并且按照Apollo客戶端解決方案庫：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}
  );
};
// 查詢語句
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類似，使用包裹項目，通過graphql方法將數(shù)據(jù)注入到組件中。

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

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

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

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

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

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

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

這個是apollo提供的線上編輯器，可以在線上編寫schema和resolve，然后可以下載下來部署

https://www.howtographql.com/

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

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

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

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