graphql基本使用graphql相关知识总结。持续更新中🍊🍊🍊！将不断更新和完善，将经常使用到的知识汇总；欢

GraphQL是什么？

用于API查询的语言

用来检索自己所需要的数据，GraphQL对API提供了一套易于理解的完整描述，可以让客户端更准确的获取自己想要的数据。解决了前端在请求后端数据的时候，后端返回了一套数据，有可能有的并不会使用的到，前端还需要截取才可以使用，所以GraphQL就出现了，可以取自己想要的数据。

特点？

请求只需要的字段
只使用一个请求，请求多个资源

GraphQL初体验

准备

用到的第三方包

Express
Body-parser
Mongoose
GraphQL
express-graphql结合express和graphql的中间件
1. 安装的时候出现问题，因为npm最新版本跟包依赖项有冲突，执行这个命令就可以npm install express-graphql --legacy-peer-deps

后端使用

定义查询用type Query

定义操作用type Mutation

在插入的时候遇到问题，一直提醒数据表.insert不是个函数，这是MongoDB的版本问题，3.0版本使用create方法进行插入

定义输入的查询需要使用input

基本使用(增、删、改、查）

const express = require("express");
const { graphqlHTTP } = require("express-graphql");
const { buildSchema } = require("graphql");
const bodyParser = require("body-parser");
const { user } = require("./schema/user.js");

const app = express();
// 添加body解析器
app.use(bodyParser.urlencoded({ extented: false }));
app.use(bodyParser.json());

// 创建查找规则 查询的语句和类型
// 定义传入的字段
const schema = buildSchema(`
  input UserInput{
    name:String
    age:Int
    height:String
    level:String
  }
  type User{
    name:String
    age:Int
    height:String
    level:String
  }
  type Mutation{
    createUser(input:UserInput):User
    deleteUser(name:String!):Boolean
    updateUser(name:String!,input:UserInput):Boolean
  }
  type Query{
    user(name:String!):[User]
    users:[User]
  }
`);

// 定义查询的处理器
const rootValue = {
  // 查询单个数据
  user({ name }) {
    return new Promise((resolve, reject) => {
      let result = user.find({ name });
      result.then((res, err) => {
        if (err) {
          reject(err);
        }
        resolve(res);
      });
    });
  },
  // 查询多个数据
  users() {
    return new Promise((resolve, reject) => {
      let result = user.find();
      result.then((res, err) => {
        if (err) {
          reject(err);
        }
        resolve(res);
      });
    });
  },
  // 增加数据
  createUser({ input }) {
    return new Promise((resolve, reject) => {
      user
        .create({
          name: input.name,
          age: input.age,
          height: input.height,
          level: input.level,
        })
        .then((res, err) => {
          if (err) {
            reject(err);
          }
          resolve(res);
        });
    });
  },
  // 删除数据
  deleteUser({ name }) {
    return new Promise((resolve, reject) => {
      user.deleteMany({ name }).then((res, err) => {
        if (err) {
          reject(err);
        }
        resolve(true);
      });
    });
  },
  // 更新数据
  updateUser({ name, input }) {
    return new Promise((resolve, reject) => {
      user.updateOne({ name }, input).then((res, err) => {
        if (err) {
          reject(err);
          console.log(res + "success");
        }
        resolve(res.acknowledged);
      });
    });
  },
};
// 创建静态资源的文件，不用解决跨域问题
app.use(express.static("./src"));
// 创建接口
app.use("/graphql", graphqlHTTP({ schema, rootValue, graphiql: true }));

app.listen(3000, () => {
  console.log("服务器已启动，运行在3000端口");
});

前端指令

查

所有

query{
    users{
      name
      age
    }
  }

单个字段

 query{
    user(name:"david"){
      name
      age
    }
  }

增

mutation{
  createUser(input:{name:"jane",age:30,height:"190",level:"95"}){
    name,
    age,
    height,
    level
  }
}

删

 mutation{
    deleteUser(name:"lihua")
  }

改

 mutation{
    updateUser(name:"livia",input:{age:27,level:"88"})
  }

前端使用

查一个

 function getOneData(){
    const query=` query($name:String!){
    user(name:$name){
      name
      age
    }
  }`
    axios({
      url:"/graphql",
      method: "POST",
      data:{
        query:query,
        variables:{
        name:"david"
      }
      }
    }).then(res=>{
      console.log(res.data.data.user);
    }).catch(err=>{
      console.log(err);
    })
  }

查多个

 function getData(){
      const query=`query{
          users{
            name
            age
          }
        }`
    axios({
      url:"/graphql",
      method: "POST",
      data:{
        query,
          }
    }).then(res=>{
      console.log(res.data.data.users);
    }).catch(err=>{
      console.log(err);
    })
    }

增加

function insertData(){

    const mutation=`mutation($input:UserInput){
     createUser(input:$input){
       name
       age
       height
       level
     }
  }`
    axios({
      url:"/graphql",
      method:"POST",
      data:{
        query:mutation,
        variables:{
          input:{
            name:"rose",
            age:18,
            height:"170",
            level:"99"
          }
        }
      }
    }).then(res=>{
      console.log(res.data.data);
    }).catch(err=>{
      console.log(err);
    })
  }

更新

  function updateData(){
    const mutation=`
      mutation($name:String!,$input:UserInput){
        updateUser(name:$name,input:$input)
      }
    `
    axios({
      url:"/graphql",
      method:"POST",
      data:{
        query:mutation,
        variables:{
          name:"david",
          input:{
            level:"60"
          }
        }
      }
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
  }

删除

  function deleteData(){
    const mutation=`
      mutation($name:String!){
        deleteUser(name:$name)
      }
    `
    axios({
      url:"graphql",
      method:'POST',
      data:{
        query:mutation,
        variables:{
          name:"rose"
        }
      }
    }).then((res=>{
      console.log(res);
    })).catch(err=>{
      console.log(err);
    })
  }