node篇 graphql 入门

最新推荐文章于 2024-08-09 07:44:27 发布

Posden

最新推荐文章于 2024-08-09 07:44:27 发布

阅读量948

点赞数

分类专栏： GraphQL 文章标签： nodejs graphql

本文链接：https://blog.csdn.net/weixin_44420276/article/details/106932969

版权

GraphQL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

graphql 官网链接，详情翻阅官网，一定比我写的好。

个人第一次接触，公司大佬推荐，之后去搜文档，教程，视频。

入门Demo

必写 hello world

const express = require('express');
const { buildSchema } = require('graphql');
const graphqlHttp = require('express-graphql');
const app = express()

const schema = buildSchema(`
    type Query {
        hello: String
    }
`)

const root = {
    hello: ()=>{
        return 'hello world'
    }
}

app.use('/graphql', graphqlHttp({
    schema: schema,
    rootValue: root,
    graphiql: true // 调试工具
}))

app.listen(3000)

在这里插入图片描述

基本类型

String Int Float Boolean ID [String]

const express = require("express");

const { buildSchema } = require("graphql");

const graphqlHttp = require("express-graphql");

const schema = buildSchema(`
    type Query {
        hello: String,
        bookInfo: BookInfo,
        booklist: [BookInfo]
    },
    type BookInfo {
        name: String,
        author: String,
    }
`);

const root = {
  hello: () => {
    return "hello world";
  },
  Info: () => {
    return {
      name: "html",
      author: "css",
    };
  },
  list: () => {
    return [
      {
        name: "js",
        author: "js",
      },
      {
        name: "html",
        author: "html",
      },
      {
        name: "css",
        author: "css",
      },
    ];
  },
};

const app = express();

app.use(
  "/graphql",
  graphqlHttp({
    schema: schema,
    rootValue: root,
    graphiql: true,
  })
);

app.listen(3000);

在这里插入图片描述

参数传递

! 必传 调试工具只识别 " 参数传递解构 args { }

const express = require("express");

const { buildSchema } = require("graphql");

const graphqlHttp = require("express-graphql");

const schema = buildSchema(`
    type Query {
        hello: String,
        Info: Info,
        list: [Info],
        currInfo(name: String!):Info
    },
    type Info {
        name: String,
        author: String,
    }
`);

const root = {
  hello: () => {
    return "hello world";
  },
  Info: () => {
    return {
      name: "html",
      author: "css",
    };
  },
  list: () => {
    return [
      {
        name: "js",
        author: "js",
      },
      {
        name: "html",
        author: "html",
      },
      {
        name: "css",
        author: "css",
      },
    ];
  },

  currInfo({name}){
    const list = [
        {
          "name": "js",
          "author": "js"
        },
        {
          "name": "html",
          "author": "html"
        },
        {
          "name": "css",
          "author": "css"
        }
      ];
      let result = list.filter(item => item.name == name )
      return result[0]
  }
};

const app = express();

app.use(
  "/graphql",
  graphqlHttp({
    schema: schema,
    rootValue: root,
    graphiql: true,
  })
);

app.listen(3000);

在这里插入图片描述

客户端传递

新建index.html 你可以单独出来（注意跨域），也可以public express.static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        const name = "js"
        const query = `query CurrInfo($name:String !){  // query 后面接口名字随意，就像我们平时自定义封装接口重新取名一样，但为了语义化
            currInfo(name: $name){   // $name 个人理解为形参  name是$name赋值的对象
                name, // 要指定返回的字段
                author
            }
        }`;

        fetch('http://localhost:3000/graphql',{
            method:"POST",
            headers:{
                'Content-type':'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                query,
                variables: {name}
            })
        }).then( res => console.log(res))
    </script>
</body>
</html>

在这里插入图片描述

mutation

const express = require("express");

const { buildSchema } = require("graphql");

const graphqlHttp = require("express-graphql");

const schema = buildSchema(`
    input AccountInput {
        name: String
        age:Int
        sex:String
        department: String
    }
    type Account {
        name: String
        age:Int
        sex:String
        department: String
    }
    type Mutation {
        createAccount(input: AccountInput): Account
        updateAccount(name: ID!,input: AccountInput): Account
    },
    type Query {
        accounts: [ Account ]
    }
`);

let db = [];

const root = {
  accounts() {
    return db;
  },
  createAccount({ input }) {
    db.push(input);
    return input;
  },
  updateAccount({ name, input }) {
    const item = db.filter((item) => item.name == name);
    if (item) {
      const updateAccount = Object.assign({}, item, input);

      db = db.map((item) => {
        return item.name === updateAccount.name ? updateAccount : item;
      });

      return updateAccount;
    }
  },
};

const app = express();

app.all("*", function (req, res, next) {
  // 设置请求头为允许跨域
  res.header("Access-Control-Allow-Origin", "*");
  // 设置服务器支持的所有头信息字段
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild, sessionToken"
  );
  // 设置服务器支持的所有跨域请求的方法
  res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  if (req.method.toLowerCase() == "options") {
    res.send(200); // 让options尝试请求快速结束
  } else {
    next();
  }
});

app.use(
  "/graphql",
  graphqlHttp({
    schema: schema,
    rootValue: root,
    graphiql: true,
  })
);

app.listen(3000);

在这里插入图片描述
以创建为例客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        var name = "html5"
        var age = 1
        var sex = "man"
        var department ="html"
        var query = `mutation CreateAccount($input: AccountInput){
            createAccount(input: $input){
                name,
                age,
                sex,
                department
            }
        }`;

        fetch('http://localhost:3000/graphql',{
            method:"POST",
            headers:{
                'Content-type':'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                query,
                variables: {
                    input: {
                        name,
                        age,
                        sex,
                        department
                }}
            })
        }).then( res => console.log(res))
    </script>
</body>
</html>