安科网

GraphQL 学习

YuanZhea

YuanZhea

2019-07-01

关注 关注

GraphQL 学习

一、什么是GraphQL

一种用于 API 的查询语言

二、学习GraphQL

开始撸码学习

1.写一个 server.js 文件

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

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

const root = {hello: () => 'Hello world!'};

const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));
使用命令
1. 使用 npm init -y 初始化一个 package.json 文件
2. 安装所需插件 npm install express express-graphql graphql -S

GraphQL 学习
GraphQL 学习

遇上错误如上:项目名称不能使用 grapql，修改成 my-graphql

2.启动项目测试

命令: node server.js

GraphQL 学习

遇上端口占用问题，停掉或者改用其他端口。

GraphQL 学习

相关命令: 
    lsof -i :4000
    kill -9 端口号（上图为,47806）

GraphQL 学习

如上所示，启动成功。
访问地址: localhost:4000/graphql

GraphQL 学习

访问成功

3.定义复杂类型

定义一个 学生类型 student
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
  type Student{
    name:String
    age:Int
  }
  type Query {
    hello: String
    name:String
    student:Student
  }
`);

const root = {
    hello: () => 'Hello world!',
    name:()=>{
        return 'zhangbf'
    },
    student:()=>{
        return {
            name:'张三丰',
            age:18
        }
    }
};

const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));
运行结果

GraphQL 学习

4. 定义参数类型

新建一个 baseType.js文件
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
  type Query {
    getClassMates(classNo:Int):[String]
  }
`);

const root = {
    getClassMates({classNo}) {
        const obj = {
            301: ['张三丰', '张翠山', '殷素素'],
            61: ['张大三', '李大四', '王大五'],
        };
        return obj[classNo];
    }
};

const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));
运行该文件 node baseType.js
在浏览器查看结果,如下

GraphQL 学习

示例二
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
  type Student{
    name:String
    sex:String
    age:Int
    grade(number:Int):String
  }
  type Query {
    getClassMates(classNo:Int):[String]
    student(username:String):Student
  }
`);

const root = {
    getClassMates({classNo}) {
        const obj = {
            301: ['张三丰', '张翠山', '殷素素'],
            601: ['张无忌', '赵敏', '周芷若'],
        };
        return obj[classNo];
    },
    student({username}){
        const name=username;
        const sex="男";
        const age=20;
        const grade=({number})=>{
            if(number>60){
                return "及格了"
            }else{
                return "垃圾"
            }
        };

        return {
            name,
            sex,
            age,
            grade
        }

    }
};

const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

GraphQL 学习

三、使用GraphQL

1.在客户端访问graphql的接口

1.1 允许静态资源访问目录

app.use(express.static('public'));

GraphQL 学习

1.2 在 public 目录下添加 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>graphql 客户端访问接口</title>
</head>
<body>
<button onclick="getData()">获取数据</button>
</body>

<script>
    function getData() {
        const query = `
            query Student($username:String,$number:Int){
                student(username:$username){
                    name
                    age
                    sex
                    grade(number:$number)
                }
            }
        `;

        const variables = {username: '张三丰', number: 56};

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

1.3 重新启动

node baseType.js

1.4 查看访问结果

GraphQL 学习

2. 在客户端修改数据

创建一个文件，用于测试 插入数据、更新数据。

2.1 新建一个 mutation.js 文件

创建一个 mutation.js 文件
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
    input StudentInput{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Student{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Mutation{
        createStudent(input:StudentInput):Student
        updateStudent(id:ID!,input:StudentInput):Student
    }
    
    type Query{
        student:[Student]
    }
`);

const fakeDb = {};//数据库对象

const root = {
    student() {
        const arr = [];
        for (const index in fakeDb) {
            arr.push(fakeDb[index]);
        }
        return arr;
    },
    createStudent({input}) {
        //类似保存到数据库
        fakeDb[input.name] = input;
        //返回保存结果
        return fakeDb[input.name];
    },
    updateStudent({id, input}) {
        //保存在一个对象里面
        const updateStudent = Object.assign({}, fakeDb[id], input);
        fakeDb[id] = updateStudent;
        //返回对象
        return updateStudent;
    }
};

const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

2.2 执行查看结果

node mutation.js

GraphQL 学习

2.3 认证中间件

创建一个 middleware.js 文件，用于测试
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

const schema = buildSchema(`
    input StudentInput{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Student{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Mutation{
        createStudent(input:StudentInput):Student
        updateStudent(id:ID!,input:StudentInput):Student
    }
    
    type Query{
        student:[Student]
    }
`);

const fakeDb = {};//数据库对象

const root = {
    student() {
        const arr = [];
        for (const index in fakeDb) {
            arr.push(fakeDb[index]);
        }
        return arr;
    },
    createStudent({input}) {
        //类似保存到数据库
        fakeDb[input.name] = input;
        //返回保存结果
        return fakeDb[input.name];
    },
    updateStudent({id, input}) {
        //保存在一个对象里面
        const updateStudent = Object.assign({}, fakeDb[id], input);
        fakeDb[id] = updateStudent;
        //返回对象
        return updateStudent;
    }
};

const app = express();

const middleware = (req, res, next) => {
    if (req.url.indexOf('/graphql') !== -1 && req.headers.cookie.indexOf('auth') === -1) {
        res.send(JSON.stringify({
            error: '您没有权限访问该接口'
        }));

        return false;
    }

    //放行
    next();
};

//注册中间件
app.use(middleware);

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

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

GraphQL 学习

添加 auth值

GraphQL 学习

3. 使用ConstructingTypes 类型

为了便于维护，使用 ConstructingTypes 类型

1.创建 constructingTypes.js 测试文件

const express = require('express');
const graphqlHTTP = require('express-graphql');
const graphql = require('graphql');

var StudentType = new graphql.GraphQLObjectType({
    name: "Student",
    fields: {
        name: {type: graphql.GraphQLString},
        age: {type: graphql.GraphQLInt},
        sex: {type: graphql.GraphQLString},
        grade: {type: graphql.GraphQLInt},
    }
});

var queryType = new graphql.GraphQLObjectType({
    name: 'Query',
    fields: {
        student: {
            type: StudentType,
            args: {
                username: {type: graphql.GraphQLString}
            },
            resolve: function (_, {username}) {
                const name = username;
                const sex = '男';
                const age = 18;
                const grade = 20;
                return {
                    name,
                    sex,
                    age,
                    grade
                }
            }
        }
    }
});

var schema = new graphql.GraphQLSchema({query: queryType});


const app = express();

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

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));
查看运行结果

GraphQL 学习

四.与数据库相结合

1.创建测试数据库 test

在 test数据库下面 创建 student 表

GraphQL 学习

2.在安装mysql插件

在 npmjs.com 网站找 mysql
安装
 npm install mysql2 -S

3. 创建 database.js 测试文件

const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');
const mysql = require('mysql2');

//https://www.npmjs.com/package/mysql2  mysql

//连接数据库
const connection = mysql.createConnection({
    host: 'localhost', //数据库访问地址
    user: 'root', //数据库用户
    password: 'root', //数据库访问密码
    database: 'test' //数据库
});

const schema = buildSchema(`
    input StudentInput{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Student{
        name:String
        age:Int
        sex:String
        grade:Int
    }
    type Mutation{
        createStudent(input:StudentInput):Student
        deletedStudent(id:ID!):Boolean
        updateStudent(id:ID!,input:StudentInput):Student
    }
    
    type Query{
        student:[Student]
    }
`);

const root = {
    student() {
        //查询操作
        return new Promise((resolve, reject) => {
            connection.query('select name,sex,age,grade from student', (err, results) => {
                if (err) {
                    console.log(results);
                    console.log('出错了：' + err);
                    return false;
                }
                const arr = [];
                for (let i = 0; i < results.length; i++) {
                    arr.push({
                        name: results[i].name,
                        sex: results[i].sex,
                        age: results[i].age,
                        grade: results[i].grade,
                    })
                }
                resolve(arr);
            })
        });
    },
    createStudent({input}) {
        //保存到数据库
        const data = {
            name: input.name,
            age: input.age,
            sex: input.sex,
            grade: input.grade,
        };

        return new Promise((resolve, reject) => {
            connection.query('insert into student set ?', data, (err,results) => {
                if (err) {
                    console.log(results);
                    console.log('出错了:' + err.message);
                    return false;
                }

                resolve(data);
            });
        });

    },
    updateStudent({id, input}) {

        //更新操作
        const data = input;

        return new Promise((resolve, reject) => {
            connection.query('update student set ? where name=?', [data, id], (err,results) => {
                if (err) {
                    console.log(results);
                    console.log('出错了:' + err.message);
                    return false;
                }
                resolve(data);
            });
        });
    },

    deletedStudent({id}) {

        //删除操作
        return new Promise((resolve,reject)=>{
            connection.query('delete from student where name=?',[id],(err,results)=>{
                if (err) {
                    console.log(results);
                    console.log('出错了:' + err.message);
                    reject(false);
                    return false;
                }
                resolve(true);
            })
        });
    }
};

const app = express();

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

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

4.查看演示结果

启动 node database.js

GraphQL 学习

GraphQL 学习

graphql const segmentfault

YuanZhea

YuanZhea

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Facebook：如何在Golang中搭建GraphQL？

本文转载自公众号“读芯术”。多年来，人们一直在使用REST API来满足开发需求，但得完成大量不必要的调用后，开发者才能灵活使用。本文将重点介绍GraphQL的主要功能，以及就API而言它存在的优缺点。文末将展示一个使用Golang的简单程序。Graph

sichenglain 2020-10-27

GraphQL初体验，Node.js构建GraphQL API指南

在过去的几年中，GraphQL[1]已经成为一种非常流行的API规范，该规范专注于使客户端的数据获取更加容易。但是，在GraphQL中，客户端可以精确地确定其从服务器获取的数据。与任何技术决策一样，了解GraphQL为你的项目提供了哪些优势是很重要的，而不

zhyue 2020-09-28

Laravel中GraphQL接口请求频率实战记录

起源:通常在产品的运行过程,我们可能会做数据埋点,以此来知道用户触发的行为,访问了多少页面,做了哪些操作,来方便产品根据用户喜好的做不同的调整和推荐,同样在服务端开发层面,也要做好“数据埋点”,去记录接口的响应时长、接口调用频率,参数频率等,方便我们从后端

0linker 2020-09-01

graphql mesh graphql 模式使用HAProxy Data Plane API 的流程

graphql mesh 会将swagger api 的get，put，post，delete， 等操作转换为不同的操作，get以query 展现post,put,delete 以mutaion展现，以下是一个简单的使用说明。获取versionid这个实际

sichenglain 2020-05-19

zeeqs 一个通用的zeebe 数据查询服务

基于此我们可以更好的分析数据，了解wokrflow 的状态，同时也为我们提供了一个很好的数据集成方案graphql 的处理基于graphql-spring-boot-starter . 大概查看代码目前是exportert数据的处理有Hazelcast，E

FZEROF 2020-04-26

为什么使用GraphQL？

正如我以前所写，GraphQL 是一种下一代 API 技术，它正在改变客户端应用程序与后端系统的通信方式以及后端系统的设计方式。由于一开始就从创建它的组织 Facebook 获得了支持，并得到了其他技术巨头的支持，因此 GraphQL 作为应用程序系统的关

zehuawong 2020-04-07

Go mod graphql-go 的 Replace

现在在项目中大量的使用graphql，但用的版本是3年前的版本。升级成go mod之后出错了，因为graphql的语法发生了变化。这时候有一个搞笑的问题，你需要找到3年前的那个版本。

zehuawong 2020-02-11

GraphQL vs REST API 架构，谁更胜一筹？

2015年， Facebook开源GraphQL。此后，它在前端Web中大受欢迎。传统的REST API有何不足？在本文中，我们将深入探讨GraphQL的设计原则，比较 GraphQL 与 REST 的异同，并讨论GraphQL 相对其他架构的优点。1你的

acloudhuang 2020-01-18

你是否优化了API的性能？试一试改用GraphQL

那我们可以尝试使用GraphQL，GraphQL为这些问题提供了一种高性能的解决方案。此外，由于GraphQL使用的是架构，因此它已经可以将数据组织到首选结构中，因此我们可以毫无犹豫使用GraphQL用到自己项目中，例如，使用GraphQL产生代码的Jav

IT新技术 2020-01-07

GraphQL、Dash和Grafana哪个才是最佳“王者”？

本期小芯给大家带来的是GraphQL、Grafana 和Dash大乱战，科普向，让你茶余饭后的闲谈多一份科学的气息。接下来，小芯将对它们进行逐一的详细介绍，然后进行比较。在以上三个工具中，除了GraphQL外，另外两个用于数据可视化。数据可视化已经成为现代

wikowin 2019-12-15

GraphQL，API的新工具规范

为了确保服务端能够响应某种查询，并保证客户端可以根据既定的模式来验证该查询，您可以开发出特有的GraphQL模式，并使用任何一种编程语言来创建对应的接口。籍此，您便可以根据与结果相匹配的GraphQL查询格式，来预测对应的结果。此外，GraphQL模式还能

FZEROF 2019-12-09

GraphQL学习之原理篇

在上一篇文章基础篇中，我们介绍了GraphQL的语法以及类型系统，算是对GraphQL有个基本的认识。在这一篇中，我们将会介绍GraphQL的实现原理。说到原理，我们就不得不依托于GraphQL的规范：GraphQL. GraphQL规范主体部分有6大部分

sichenglain 2019-11-21

Gatsby极速入门—使用GraphQL解析Markdown（2）

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于

chzh0 2019-11-19

【CuteJavaScript】GraphQL真香入门教程

看完复联四，我整理了这份 GraphQL 入门教程，哈哈真香。。。GraphQL 是 Facebook 开发的一种 API 的查询语言，与 2015 年公开发布，是 REST API 的替代品。GraphQL 既是一种用于 API 的查询语言也是一个满足你

FZEROF 2019-11-19

用Node.js创建安全的 GraphQL API

本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么？通过结构良好的API，可以拥有可靠、可维护且可扩展的API，可以为多种客户端和前端应用提供服务。GraphQL 是一种 AP

月光恋九霄 2019-11-18

前端请求graphql的数据格式之我见

刚开始我们用ajax，axios去请求后端数据，无往不利。可是，在某一天，突然，要用graphql来请求数据！心里一慌，没事，来者不拒。上面就是类似get请求了。xxxName:随便起一个名字；xxxBackName:这是后端的字符串名字；name,age

zehuawong 2019-11-08

详解在vue-cli中使用graphql即vue-apollo的用法

npm install Csave vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag. /* 这个属性的意思是在同

HelloWood 2018-09-08

在vue项目中集成graphql(vue-ApolloClient)

GraphQL schema是强类型的，可使用SDL来定义。比如，可以使用构建工具验证API请求，编译时检查API调用可能发生的错误

zehuawong 2018-09-08

The Architectural Principles Behind Vrbo’s GraphQL Implementation

At Vrbo, we’ve been using GraphQL for over a year. But there are some differences in how we’ve implemented and used GraphQL comp

0linker 2019-10-31

API 接口设计： GraphQL 和 REST 怎么选择？

有很多东西需要成长但富有活力的新成员还是经验丰富的老成员?在此之前让我们了解下 REST 和 GraphQL吧。REST即表述性状态传递，它符合特定的指南，是 Web API 实现的约束。它鼓励客户端和服务器以无状态模式交换信息。请记住，并非所有 API

greatji 2019-10-01
YuanZhea

YuanZhea

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号