GraphQL一个简单的入门示例

Pines_Cheng 发布于2019-08-23 18:04 / 525人阅读

摘要：本文首发于个人博客目录什么是解决了什么问题一个简单的入门示例什么是官方文档定义一种用于的查询语言，有以下特点请求你所要的数据不多不少获取多个资源只用一个请求描述所有可能的类型系统解决了什么问题来说一个实际的场景前后端联调接口一直以来都是特别

本文首发于个人博客

什么是GraphQL

解决了什么问题

GraphQL一个简单的入门示例

什么是GraphQL

官方文档定义：一种用于API的查询语言， Graph + Query
有以下特点

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

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

描述所有可能的类型系统

解决了什么问题 1. 来说一个实际的场景：

前后端联调接口一直以来都是特别费劲的一个环节，使用REST接口，接口返回的数据格式，数据类型（有哪些字段，字段的类型）都是后端自己预先定义好的，如果返回的数据格式并不是调用者所期望的，作为前端的我们可以通过以下两种方式去解决

和后端沟通，该接口（更改数据源）

自己做一些适配工作（处理数据源）

有这种经历的人都知道，让后端改接口这是一个很不现实方案，尤其是对于三端（web、andriod、ios）公用同一套后端接口的情况下，让后端改接口的结构基本不可能，所以一般都是前端自己做一些接口数据的适配工作

其实我们真的很希望，我们需要什么数据，需要什么格式，后端就按照什么格式给我们返回什么样的数据结构，我们要哪些字段，后端就只给我们返回我们需要的这些字段，其他的都不返回，这样，前端就和后端解耦了，我们不用再每天和后端因为接口问题去撕逼，GraphQL就是一个这样的思路来帮助我们解决这个前后端联调接口的问题，在前端直接写查询，后端只管给前端返回前端查询的这些数据；

2. 还有一种场景:

一个页面里展示的信息， info1, info2, info3，前端需要请求多个接口，info1对应的接口A中的a字段，info2对应的接口B中的b字段，info3对应的接口C中的c字段

// /api/user/A
{
    id: 1111,
    name: "张三",
    a: "当前页面要展示的info1",
    b: "b"
    // 其他字段
}
// /api/order/B
{
    id: 2222,
    name: "hahah",
    a: "a"
    b: "当前页面要展示的info2",
    // 其他字段
}
// /api/system/C
{
    id: 3333,
    name: "hehe",
    a: "a"
    c: "当前页面要展示的info3",
    // 其他字段
}

这个时候，稍微有点脾气的前端，都会去找后端撕逼，

前端A: “就这三个字段，你还让我请求三个接口，你不能一个接口都返回给我吗”，
后端B：“哎，我也想啊，但是xxxxx，所以我这边不好改，”，
...
最后那就这样吧。

当然，我举得这个例子是一个很简单的场景，实际开发过程中要比这个还要复杂；

如果使用GraphQL的话，前端自己写查询，这个页面需要哪些需哪数据，后端就返回给哪些数据，
这是考虑到后端所有的接口都在同一个域下面，但是一般比较复杂的系统，后端都会分为不同的域，用户域，商品域，基础模块域，交易域等等，这时即使用了GraphQL也可能

后端C：“你看其他都不是我负责的域，我要是自己给你封装一个，我自己底层需要经过xxxxx等复杂的步骤去获取其他域的，这个很复杂，你还是直接去他哪个域去查询吧”，

有两种方法，

你就再多写一个GraphQL

自己写一个node中间层，中间层来处理这些接口数据的聚合，换句话说，中间层来聚合成一个GraphQL查询来返回给前端，中间层分别取调用服务端的三个接口，然后把三个接口返回的数据聚合成前端所需要的

GraphQL一个简单的入门示例 准备

npm i --save express  express-graphql graphql cors

服务端代码

var express = require("express");
var graphqlHTTP = require("express-graphql");
const { buildSchema } = require("graphql");
const cors = require("cors"); // 用来解决跨域问题

// 创建 schema，需要注意到：
// 1. 感叹号 ！ 代表 not-null
// 2. rollDice 接受参数
const schema = buildSchema(`
  type Query {
    username: String
    age: Int!
  }
`)
const root = {
    username: () => {
        return "李华"
    },
    age: () => {
        return Math.ceil(Math.random() * 100)
    },
}
const app = express();
app.use(cors());
app.use("/graphql", graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}))

app.listen(3300);
console.log("Running a GraphQL API server at http://localhost:3300/graphql")

客户端代码


    
    
    
    <span class="hljs-attr">graphql</span> <span class="hljs-string">demo</span>

运行结果

参考

graphql官方文档
GraphQL 入门介绍

GPU云服务器云服务器最简单的webrtc示例 webrtc 简单示例 html5简单示例简单入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104614.html

GraphQL 从入门到实践

摘要：本文实例代码什么是是一种面向数据的查询风格。概述前端的开发随着框架全面普及，组件化开发也随之成为大势所趋，各个组件分别管理着各自的状态，组件化给前端仔带来便利的同时也带来了一些烦恼。 showImg(https://segmentfault.com/img/remote/1460000018479542?w=4928&h=3280); 本文首先介绍了 GraphQL，再通过 Mongo...

Blackjun 2019-08-26 13:36 评论0 收藏0
GraphQL 技术栈揭秘

摘要：关注业务，而不是技术将数据需求放在它们所属的客户端。技术栈中的每一部分都起着作用技术栈中所有部分之间的协作可以借助缓存来完成。现在，我们来看看另一个贯穿整个技术栈的功能的例子。你可以认为是首个内置细粒度查看的技术。本文整理自2017年 GraphQL 峰会上的演讲，详述缓存、追踪、模式拼接和 GraphQL 未来发展等有关话题。 Facebook 开源 GraphQL 至今已两年有余...

zzbo 2019-08-21 17:48 评论0 收藏0
GraphQL 的入门指南

摘要：允许创建零配置的服务器。这是一种人类可读的模式语法，称为规范与描述语言。类型是表示外观的自定义对象。为此，创建一个名为的新查询。这意味着无论何时在服务器中发生事件，并且每当调用该事件时，服务器都会将相应的数据发送到客户端。 showImg(https://segmentfault.com/img/bVbm0c1?w=2560&h=1024); 想阅读更多优质文章请猛戳GitHub博客,...

马忠志 2019-08-16 14:20 评论0 收藏0
GraphQL 搭配 Koa 最佳入门实践

摘要：如下图嗯，如图都已经查询到我们保存的全部数据，并且全部返回前端了。如图没错，什么都没有就是查询服务的界面。写好了之后我们在配置一下路由，进入里面，加入下面几行代码。 GraphQL一种用为你 API 而生的查询语言，2018已经到来，PWA还没有大量投入生产应用之中就已经火起来了，GraphQL的应用或许也不会太远了。前端的发展的最大一个特点就是变化快，有时候应对各种需求场景的变化，不...

MoAir 2019-08-21 18:39 评论0 收藏0