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 = 3000

app.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 = 3000

app.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站搜索“我们一起学前端”