简历加分项:初学graphql

我心飞翔 分类:javascript

1.graphql出现的原因和基本介绍

想必大多数人对传统的数据库查询语句都很熟悉,在条件复杂时,语句非常麻烦; 在前端开发时也会经常要和后端对接数据,有时候后端给你的数据并没有仔细的筛选,冗余的数据大大降低效率。graphql本质上是一种查询语句的设计,可以让你自定查询的模式,帮助你简单地得到精确的数据。掌握graphql在面试那些主打数据搜索的互联网大厂时会让面试官更加留意。更多细节请见链接。本文仅为初学展示。

2.具体实现

1.环境 VS Code+npm 7.0.8+node v15.2.0.项目目录里运行 npm init -y 初始化。接着 npm i express express-graphql graphql。本例是结合express来实现如要更换则需将安装语句里的express全部替换

2.目录下建立hello.js,先引入必须的三个方法。这些是基本的API,需要记下。

const express = require('express');//引入express
const { buildSchema } = require('graphql'); //引入graphql里的建立查询模型函数,如同react中的createStore等
const graphqlHTTP = require('express-graphql').graphqlHTTP;//graphqlHTTP是grapql的http服务,
//用于处理graphql的查询请求
 

3.建立简单查询模型

 //schema是查询模式,本意是数据库的组织和结构,buildSchema接受一个字符串模板,
 //里面定义了查询模型和查询实体,
const schema = buildSchema(`
  type User {//名字为User的查询模式,
              //其中有两个属性,并且定义了属性的类型约束,
    name: String
    age: Int
  }
   type Query {//Query 指定了这里面的实体都是用于查询。
    hero: String//hero 为简单类型,如同name一样,可以在Query里直接定义
    user: User //user 为复杂类型所以要在外部定义 
  }
  //如同 typescript.这些语法是固定的
 

(一)简单例子

4.实现模型:

const root = {
 hero:() => {
    return "I am icon man ***";
  },
  user: () => {
    return {
      name: 'leo',
      age: 18
    }//这是两个假数据,为了模拟效果
}
const app = express();//使用express编译
app.use('/graphql', graphqlHTTP({// 'graphql'指定页面路径
  schema: schema,//查询模型为我们定义的
  rootValue: root,//数据来源为自定义的root
  graphiql: true//是否启动graphiql查询界面。相当于一个工具,设置启动以帮助查询
}));

//用express 启动静态服务器。在8000端口上启动
app.use(express.static('public'))
app.listen(8000);
 

5.尝试:运行nodemon hello.js.以热更新启动页面监听。来到网址:http://localhost:8000/graphql

  • 1运行如图:左边为查询界面。右边为输出界面 .输入查询语句后,点击上方运行图标

image.png

  • 2 接下来查询user:注意,按格式输入查询语句。应为user是较为复杂的类型。输入的查询要遵守定义的scema查询模板

image.png

  • 3 graphql支持灵活查询,不需写复杂的select语句,比如只查询name属性

image.png

(二)复杂例子

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int //salary 为带参的属性,参数city类型为String
  }
  type Query {
    account(username: String):Account //带参数的查询类型,参数username为String
  }
`)
const root = {
  account({username}) {//参数传入
    const name = username
    const sex = 'man'
    const age = 18;
    const department = '百度凤巢前端研发部';
    const salary = ({city}) => {//根据参数进行条件查询
      if (city == '北京' || city == '上海' || city == '广州' || city == '深圳') {
        return 30000;
      } 
      return 3000;
    }
    return {
        name,sex,age,department,salary
    }
  },
  }
  const app = express();//使用express编译
app.use('/graphql', graphqlHTTP({
  schema: schema,//查询模型为我们前面定义的
  rootValue: root,//数据来源为自定义的root
  graphiql: true//是否启动graphiql查询界面。相当于一个工具,设置启动以帮助查询
}));
//用express 启动静态服务器。在8000端口上启动
app.use(express.static('public'))
app.listen(8000);
 

查询实践:传入用户名,城市为北京

image.png

城市为南昌,且只查salary

image.png

3 总结

  • 本例使用假数据,只是简单展示了graphql的模板和架构。可以初步了解到自定查询模板的好处。暂不涉及数据库连接
  • 安装时依赖时,需要根据使用的Node.js服务器框架 安装相应框架上的graphql
  • 查询模板定义的语法比较固定。数据类型定义非常关键,利于减少bug
  • 在启动服务时需指定路径,模型,数据源,辅助工具最好打开
  • 适宜配合typescript+node从前端向全栈迈近

本人大三,正寻实习,与君共勉,寥有拙作,万望指正

回复

我来回复
  • 暂无回复内容