GraphQL 是由 Facebook 创造的用于 API 的查询语言（这里查询语言所指的并不是常规意义上的类似 sql 语句的查询语言，而是一种用于前后端数据查询方式的规范）。GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

更多关于GraphQL的介绍大家可以看

由于GraphQL只是一套规范，不能直接使用，但社区有了很多编程语言的实现，可以直接拿过来用。这里我选用了Apollo。

什么是 Apollo

Apollo 是基于 GraphQL 的全栈解决方案集合。包括了 apollo-client 和 apollo-server ；从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便。

yarn add koa koa-bodyparser koa-router apollo-server-koa graphql graphql-tools//ornpm install koa koa-bodyparser koa-router apollo-server-koa graphql graphql-tools

// server.jsconst Koa = require('koa');const Body = require('koa-bodyparser');const router = require('koa-router')();const {graphqlKoa, graphiqlKoa} = require('apollo-server-koa');const {makeExecutableSchema} = require('graphql-tools');const { GraphQLScalarType } = require('graphql');const { Kind } = require('graphql/language');const app = new Koa();const PORT = 8090;// 模拟数据const users = [  {    id: 1,    name: 'J.K. Rowling',    date: new Date(2018, 5, 20)  },  {    id: 2,    name: 'Michael Crichton',    date: new Date(2018, 5, 21)  },];const typeDefs = `    scalar Date    type User{        id:Int!        name:String!        date: Date!    }    type Query {        users(id:Int!): [User]        user(id:Int!, name: String!):User    }    type Mutation {        addUser(name:String!):User    }    schema {        query: Query        mutation: Mutation      }`;const resolvers = {    Query: {    // 对应到typeDefs中的 type Query        users(root, args, context) {            return users;        },        user(root, args, context, info) {          return {id: args.id, name: args.name};      }    },    Mutation: { // 对应到typeDefs中的 Mutation        addUser(root, args, context) {            return {id: 2, name: args.name};        }    },    Date: new GraphQLScalarType({ // 自定义标量类型        name: 'Date',        description: 'Date custom scalar type',        parseValue(value) {          return new Date(value); // 从客户端来的数据        },        serialize(value) {          return value.getTime(); // 发送给客户端的数据        },        parseLiteral(ast) {          if (ast.kind === Kind.INT) {            return parseInt(ast.value, 10);           }          return null;        },    }),};const myGraphQLSchema = makeExecutableSchema({    typeDefs,    resolvers});app.use(Body());router.post('/graphql', graphqlKoa({    schema: myGraphQLSchema,}));router.get('/graphql', graphqlKoa({    schema: myGraphQLSchema,}));router.get( // 在浏览器里使用GraphiQL（可以理解成GraphQL领域的postman）  '/graphiql',  graphiqlKoa({    endpointURL: '/graphql',  }),);app.use(router.routes());app.use(router.allowedMethods());app.listen(PORT, ()=>console.log('app run in localhost:' + PORT));

node server.jsapp run in localhost:8090

yarn add react-apollo graphql-tag graphql apollo-client apollo-cache-inmemory apollo-link-http// ornpm install react-apollo graphql-tag graphql apollo-client apollo-cache-inmemory apollo-link-http

// src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerServiceWorker';import { ApolloProvider } from 'react-apollo';import { ApolloClient } from 'apollo-client';import { InMemoryCache } from 'apollo-cache-inmemory';import { HttpLink } from 'apollo-link-http';const httpLink = new HttpLink({ uri: 'http://localhost:8090/graphql' })const client = new ApolloClient({  link: httpLink,  cache: new InMemoryCache()})ReactDOM.render(  
         
        
     , document.getElementById('root'));registerServiceWorker();

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';import gql from 'graphql-tag';import { graphql } from 'react-apollo';class App extends Component {  render() {    console.log(this.props);    const { loading } = this.props.data;    if (loading) {      return 
     
      Loading...
     
    }    return (      
     
        
      
          
                 
       
Welcome to React
        
      
        
      
          To get started, edit src/App.js and save to reload.        
        
      
{this.props.data.user.name}
      
     
    );  }}export default graphql(gql`  query User{    user(id: 100, name: "zhangsfs") {      id      name    }    users(id: 100) {      id      name      date    }  }`)(App);