graphQL入门分享

是什么

一种用于 API 的查询语言；它与特定技术无关，你可以用任何语言实现它

简单理解，他能提供一个接口，让我们来调用，只是返回的数据格式更多是由我们前端来控制

为什么

官网：https://graphql.cn/

1.请求你所要的数据不多不少

2.获取多个资源只用一个请求

3.描述所有的可能类型系统

怎么样

演示一下

步骤一：

创建工程目录 demo

初始化项目，以及引入所需的包

npm init -f

npm install graphql express express-graphql --save

npm install babel-cli babel-preset-es2015 --save-dev

npm install -g nodemon

步骤二：

在项目根目录下创建 data 目录，并在该目录下创建 data.json 文件，并输入以下内容：

{    "1": {        "id": "1",        "name": "宁缺",        "age":20    },    "2": {        "id": "2",        "name": "光明之子",        "age":25    },   "3": {        "id": "3",        "name": "冥王之子",        "age":35    }
}

步骤三：

创建 server.js 文件，并输入以下内容：

import express from 'express'const app = express()
const port = 3000app.get('/', (req, res) => {res.send('Hello!');});let server = app.listen(port, function () {let addr = server.address();let bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;console.log('Listening on ' + bind);});

命令行运行：nodemon --exec babel-node --presets=es2015 server.js，浏览器输入：http://localhost:3000 。显示 Hello!，说明你的 express 服务已经 OK 了。

步骤四：

创建文件夹 /src/schema，并创建文件 index.js。并在 index.js 文件中编写GraphQL Schema。Schema 是 GraphQL 请求的入口，用户请求的GraphQL 将会对应到具体的 Schema。

import {GraphQLObjectType,GraphQLSchema,GraphQLString,GraphQLInt
} from 'graphql'// 我们要用的模拟数据
const data = require('../../data/data.json')const User = new GraphQLObjectType({name: 'User',description: 'User对象',fields: {id: {type: GraphQLInt},name: {type: GraphQLString},}});const Query = new GraphQLObjectType({name: 'Query',fields: {user: {type: User,args: {id: {type: GraphQLInt}},resolve: function (_, args) {return data[args.id];}}}});const Schema = new GraphQLSchema({query: Query
});export default Schema;

步骤五：

修改 server.js 文件，连接 schema。将 server.js 文件修改为以下内容：

import express from 'express'
import Schema from './src/schema'
import graphqlHTTP from 'express-graphql'const app = express()
const port = 3000app.use('/', graphqlHTTP({schema: Schema,graphiql: true}));let server = app.listen(port, function () {var addr = server.address();var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;console.log('Listening on ' + bind);});

这时，在浏览器中可以查看到如下界面

我们还可以用postman去请求

更多学习视频学习资料请参考：B站搜索“我们一起学前端”

graphQL入门分享相关推荐

GraphQL 入门第一篇
GraphQL 入门在接下来的一系列文章中,我们会了解 GraphQL 是什么,它是如何运作以及如何使用它.在找如何搭建 GraphQL 服务的文档?这有一些类库可以帮你用多种不同语言实现 Grap ...
graphql入门_GraphQL入门指南
graphql入门 by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) GraphQL入门指南 (A Beginner's Guide to Gr ...
编程小白入门分享三：Spring AOP统一异常处理
编程小白入门分享三:Spring AOP统一异常处理参考文章: (1)编程小白入门分享三:Spring AOP统一异常处理 (2)https://www.cnblogs.com/lxk12345/p ...
python 经典ppt_python入门分享.ppt
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspPython python入门分享.ppt24页本文档一共被下 ...
GraphQL 入门
## GraphQL 入门 GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义).GraphQL 并没有和任何特定数据库或者存储引擎 ...
[Unity3D入门]分享一个自制的入门级游戏项目坦克狙击手
[Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手" 我在学Unity3D,TankSniper(坦克狙击手)这个项目是用来练手的.游戏玩法来自这里(http://ww ...
【ReactJs+springBoot项目——租房】第3章：OSS存储图片+本地存储+ 房源列表查询+GraphQL入门
图片存储解决方案的分析阿里云OSS存储方案的实现本地存储方案的实现整合前端系统实现图片上传功能实现房源列表查询功能 GraphQL的入门 1.图片存储解决方案在新增房源中, ...
web 开发入门分享
分享一: 如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答. 所以对于Web开发刚刚入门的菜鸟们 ...
搞一下TDA4 | 02 TDA4VM的SDK使用入门分享
前言本系列请点击:<搞一下TDA4> 所有系列请点击:<汽车电子系列分享> 本文将会分享TDA4VM的SDK的安装和使用的一些入门经验,便于读者上手和开发这个SDK.主要内容 ...

graphQL入门分享

graphQL入门分享相关推荐

最新文章

热门文章