GraphQL 学习

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 学习

YuanZhea

YuanZhea

相关推荐

Facebook：如何在Golang中搭建GraphQL？

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

sichenglain / 0评论 2020-10-27

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

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

zhyue / 0评论 2020-09-28

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

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

0linker / 0评论 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 / 0评论 2020-05-19

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

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

FZEROF / 0评论 2020-04-26

为什么使用GraphQL？

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

zehuawong / 0评论 2020-04-07

Go mod graphql-go 的 Replace

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

zehuawong / 0评论 2020-02-11

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

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

acloudhuang / 0评论 2020-01-18

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

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

IT新技术 / 0评论 2020-01-07

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

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

wikowin / 0评论 2019-12-15

GraphQL，API的新工具规范

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

FZEROF / 0评论 2019-12-09

GraphQL学习之原理篇

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

sichenglain / 0评论 2019-11-21

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

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

chzh0 / 0评论 2019-11-19

【CuteJavaScript】GraphQL真香入门教程

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

FZEROF / 0评论 2019-11-19

用Node.js创建安全的 GraphQL API

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

月光恋九霄 / 0评论 2019-11-18

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

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

zehuawong / 0评论 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 / 0评论 2018-09-08

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

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

zehuawong / 0评论 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 / 0评论 2019-10-31

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

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

greatji / 0评论 2019-10-01

GraphQL 与 Spring Boot 的初体验

感谢您的阅读，本文由 杨斌的博客 版权所有。项目已托管于 GitHub：y0ngb1n/spring-boot-samples，欢迎 Star, Fork. GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对

zehuawong / 0评论 2019-09-08

GraphQL 查询字符串的组装

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

sichenglain / 0评论 2019-09-08

车联网服务non-RESTful架构改造实践

在构建面向企业项目、多端的内容聚合类在线服务API设计的过程中，由于其定制特点，采用常规的restful开发模式，通常会导致大量雷同API重复开发的窘境，本文介绍一种GraphQL查询语言+网关编排联合的实践，解决大量重复定制的问题。GraphQL：Gra

sichenglain / 0评论 2019-09-08

初识GraphQL，你的第一个Query

请移步到我的Blog，获得更好的阅读体验！本文的链接请点这里。GraphQL官方解释是一个用于API的查询语言。这样说起来可能不太好理解。这个API始终会返回id,name,avatar三个属性。我们可以让后端的小哥哥小姐姐帮忙去掉avatar这条属性，或

LXIBEI / 0评论 2019-09-05

GraphQL入门：非常简单

现在越来越多的公司开始用GraphQL来建立API。我们获取数据的方式发生了革命性的变化。GraphQL的起源以及我们为什么要使用这种方法 GraphQL来自于facebook。facebook内部正在寻找一种让他们的新闻推送在移动平台上加载的更稳定的方

huhao0 / 0评论 2019-07-30

2020年编程趋势预测

如果你对未来的编程世界充满好奇，那么你来对地方了。Rust是一种多范式的系统编程语言，关注于安全性——尤其是高并发时的安全性。我们已经看到四年来Rust的强劲增长。我相信2020年Rust将正式迈入“主流”编程语言的行列。尽管什么是“主流”有待自我解读，但

FZEROF / 0评论 2019-07-30

2019年web前端开发技术框架有哪些

微信小程序开发分享不得不看的2019年八大Web开发趋势，如果你想要学习web前端技术，想要走web前端之路，那就从学好web前端，了解web前端开始吧!每一年各种前端技术也应运而生，快速掌握最新的前端技术也是每一个开发者不可或缺的一门技能。所有这些新兴的

小秋 / 0评论 2019-07-19

RPC 、REST、GraphQL三种API设计方式的简介和比较

RPCRPC=remote procedure call，执行远程服务器上的一个function，举例：服务端定义了三个函数：。RPC在一些大公司中依然被使用。如果是关注于对象和资源的项目，需要对接各种不同的端和使用者，需要便于使用和阅读文档，那么适合使用

LXIBEI / 0评论 2019-07-01

2019年前端趋势分析

2018年TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有这一切跟现在的前端有哪些关系呢？下面小编来分享一下。但当 Vue 3.0 发布之后，估计他就不会这样说了。你用 Class 来写

YangjingLi / 0评论 2019-07-01

Graphql实战系列（下）

设计思路对象定义在apollo-server中是用字符串来做的，而Query与Mutation只能有一个，而我们的定义又会分散在多个文件中，因此只能先以一定的形式把它们存入数组中，在生成schema前一刻再组合。export { customDefs, c

huhao0 / 0评论 2019-07-01

为什么 GraphQL 是 API 的未来

自从 Web 开始迅猛发展，对程序员来说开发 API 是一项很艰巨的任务。我们开发 API 的方式必须随着时间的推移而发展，以便我们始终可以开发良好、直观且设计良好的API。在过去几年中，GraphQL 在越来越受到开发者的欢迎。GraphQL 是一种由

傻欣妹陀 / 0评论 2019-07-01

Graphql实战系列（上）

背景介绍graphql越来越流行，一直想把我的凝胶项目除了支持restful api外，也能同时支持graphql。由于该项目的特点是结合关系数据库的优点，尽量少写重复或雷同的代码。对于rest api，在做完数据库设计后，百分之六十到八十的接口就已经完成

FZEROF / 0评论 2019-07-01

GraphQL 和 Apollo 为什么能帮助你更快地完成开发需求？

在大前端应用的开发过程中，如何管理好数据是一件很有挑战的事情。后端工程师需要聚合来自多个数据源的数据，再分发到大前端的各个端中，而大前端工程师需要在实现用户体验好的视图 的基础上，需要考虑如何管理端上的状态。在团队中使用 GraphQL 能够很好的解决数

sichenglain / 0评论 2019-07-01

NestJS 集成graphql grpc 分布式实践

创建graphql-config.service.ts文件，用于graphql的配置及编写过滤器的逻辑。typePaths: [join], // 配置的graphql文件地址。export class ApplicationModule {}创建文件

ltstud / 0评论 2019-07-01

GraphQL基金会宣布与联合开发基金会合作推动开源和开放标准

加利福尼亚州半月湾 - 开源领导者峰会 - 2019年3月12日 - GraphQL基金会是GraphQL社区加速周围生态系统开发的中立家园，今天宣布与JDF合作，该基金会最近加入了Linux基金会，以推动开源和标准的采用，继续开发GraphQL规范。Gr

nittystone / 0评论 2019-07-01

GraphQL 从入门到实践

本文首先介绍了 GraphQL，再通过 MongoDB + graphql + graph-pack 的组合实战应用 GraphQL，详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送，并附有使用示例，边用边学印象深刻~如果希望将 GraphQ

HelloWood / 0评论 2019-07-01

GraphQL学习过程应该是这样的

记录一个从枯燥学习 GraphQL 的过程，到发现项目 Gitter，模仿项目 Github-Trending-API，最后做一个自己的学习项目 Github-Trending-GraphQL。一开始我是这样想的，最后我是这样做的，复盘整个学习过程。在之前

FZEROF / 0评论 2019-07-01

React Native项目使用react-apollo实现更新缓存的两种方式

当我从外界再次进入这个页面之后页面上显示的数据还是从cache中获取的数据。因此必须要更新cache！！对于cache，在Apollo Client中有着强大的管理策略。

LXIBEI / 0评论 2019-07-01

json to graphql schema: json2graphql

关于 GraphQLGraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。由于其强类型，返回结果可定制，自带聚合功能等特性，由

huhao0 / 0评论 2019-06-30

创造属于自己的静态博客

使用 gatsby-starter-blog 可以大量节省项目搭建时间，直接得到一个最简单的博客模版，这个模板的缺点是功能少，但是反过来说优点是有较高的自由度。我从最简单的博客模板开始添加功能的原因，就是可以让自己更熟悉整个博客的构造，自己可以随心所欲地添

huhao0 / 0评论 2019-06-30

GraphQL 在 koa 框架中的实践

在之前翻译的一篇文章为什么我们在 API 中使用 GraphQL 中介绍 GraphQL 的作用，之后笔者在 Koa 框架中实现相关接口及调用方式并整理相关实现过程，希望对如笔者一样想要使用 GraphQL 的入门者一些帮助。由于笔者日常工作开发中使用的N

huhao0 / 0评论 2019-06-30

Github API v4: GraphQL

GraphQL势不可挡，有着即将取代REST的API架构。主要好处就是“你要什么，api就给你什么。而不是你要不要都给你返回一大堆没用的。”GraphQL一个URL全够了。而且一般不是很复杂的情况下，你几乎只要request一次这个地址，就能拿到你全部需要

huangliuyu00 / 0评论 2019-06-30

【译】如何撰写精彩的技术博客文章

在那个时候，我发现博客是传播思想的最有效方式之一。写博文不像视频或会谈需要花费很长时间来准备，是个受众广且很容易完成的。2014 年我发布了第一篇博文，到现在我已经在 Medium 上写了 68 篇文章了，其中一些文章有超过 50k 的浏览次数和 1000

zehuawong / 0评论 2019-06-30

【译】为什么我们在 API 中使用 GraphQL

本文是对Why we used GraphQL for our API的翻译，如有侵权等其他问题，请联系笔者删除。最近在 Mavel 我们发布了 Platform API,我们想利用整合的力量，将这个力量直接放入每天使Marvel 的人们的创意社区中，因

LadyFork / 0评论 2019-06-30

在 Laravel 应用中构建 GraphQL API

GraphQL 是一种 API 查询语言，还是一种根据你为数据定义的类型系统执行查询的服务器端运行时。GraphQL 不依赖于任何指定的数据库或存储引擎，而是由你的代码和数据来作支持的。GraphQL 还提供了可视化界面来帮助我们编写查询语句，还提供了自动

LXIBEI / 0评论 2019-06-30

一个GraphQL查询是一个字符串

一个GraphQL查询是一个字符串，它被发送给一个与数据模式无关的服务器，然后服务器返回JSON数据。GraphQL是强类型的，并避免了版本控制，同时提供了随着数据演进可以轻易改进查询语句的能力。InfoQ找到了Lee Byron，他在Facebook工作

YuanZhea / 0评论 2015-12-30

GraphQL：一种更高效、强大和灵活的数据提供方式

在前几天的《StateOfJS: 2018年JavaScript生态圈趋势报告》一文中，我们看到了2018年在数据层GraphQL的发展势头猛烈，并且大部分用户用过都说好，但如上图数据显示，目前国内的使用人数还很少，大部分人连听都没听过，今天小肆就为大家介

遥望 / 0评论 2019-06-30

GraphQL 的入门指南

今天最常讨论的术语之一是 API，很多人不知道 API 到底是什么，API 是 Application Programming Interface。顾名思义，它是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无

huangliuyu00 / 0评论 2019-06-30

GraphQL 科普 前端向

GraphQL是基于「类型系统」来执行查询的查询语言。Facebook 2012 年开始使用 GraphQL，15年开源。graph定义了一套标准，用于描述服务端和客户端的通信。就和ECMAScript标准之于JavaScript一样。前端传入字段和结构。

haimianxiaojie / 0评论 2019-06-30