GraphQL之前后端实践Demo

Before

install

$ npm init 
$ npm i express apollo-server-express;
$ touch ./index.js

Start

安装配置完成之后，就应该设计一个demo了！所以，这个demo应该怎么设计呢❓
⬇️⬇️

• code - 1

  const express = require("express");
  const { ApolloServer } = require("apollo-server-express");
  
  const PORT = 4000;
  const app = express();
  
  const box = {
    width: 100,
    height: 200,
    weight: "100g",
    color: "white"
  }
  
  const typeDefs = [`
  """
  一个盒子模型
  """
  type Box{
    """
    这是盒子的宽度
    """
    width:Int,
    height:Int,
    color:String
  }
  
  type Query {
    getBox: Box
  }
  
  type Mutation{
    setWidth(width:Int):Box
  }
  
  schema {
    query: Query,
    mutation: Mutation
  }`]
  
  const resolvers = {
    Query: {
      getBox(_) {
        return box;
      }
    },
    Mutation: {
      setWidth(_, { width }) {
        box.width = width;
        return box
      }
    }
  };
  
  const server = new ApolloServer({
    typeDefs,
    resolvers
  });
  // 将Apollo作为Express的一个中间件
  server.applyMiddleware({ app });
  
  app.listen(PORT, () =>
    console.log(
      `🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`
    )
  );
  

  上面的代码呢可以实现一个最简单的GraphQL服务器（Apollo Server是graphql规范的一个实现）什么是Apollo Server？

• 说明：在new一个ApolloServer的时候 ⬇️⬇️
  传入了typeDefs和一个resolvers这两个参数，其中：

  参数	含义
  typeDefs	是一个字符串或者字符串数组，里面的内容是我们定义的schema
  resolvers	是schema的实现，也就是typeDefs里的Query和Mutation，注意所有的schema都要实现之后程序才能启动

演示

• query

  query {
    getBox {
      width
      height
      color
    }
  }
  

• mutation

  mutation {
    setWidth(width: 108) {
      width
      height
      color
    }
  }
  

• 传参
  刚刚的mutation我们直接在语句里写了参数，因为语句本身是字符串不利于组合，同时也不适合传递复杂的参数，所以我们需要定义参数。点击playground左下的Query Variables，在这里可以声明参数，注意需要是标准json格式

  {
    "length": 128
  }
  

  同时需要修改一下mutation语句⬇️⬇️

  mutation($length: Int) {
    setWidth(width: $length) {
      width
    }
  }
  

• code - 2
  给盒子里装点随机的小球,将数据源修改为如下形式 ⬇️⬇️

  class Ball {
    constructor() {
      this.size = ((Math.random() * 10) | 0) + 5;
      this.color = ["black", "red", "white", "blue"][(Math.random() * 4) | 0];
    }
  }
  const box = {
    width: 100,
    height: 200,
    weight: "100g",
    color: "white",
    balls: new Array(10).fill().map(n => new Ball())
  }
  

  然后在typeDefs中增加一个类型，并且修改box的类型 ⬇️⬇️

  type Box{
    width:Int,
    height:Int,
    color:String,
    balls:[Ball]
  }
  
  type Ball{
    size:Int,
    color:String
  }