前言

本篇文章可能稍微长了一点，您需要先准备好时间，以免中途要去上厕所什么的，发生中断。

我们一般都是用REST API，即后端定义好API的数据结构和参数，前端再传参请求获取数据。

比如我们有个获取用户列表的接口：GET /user/list, 返回用户id，用户名，创建时间：

[{"id": 1,"name": "jack","created_at": "2021-05-10 13:14:15"},{"id": 2,"name": "tom","created_at": "2021-05-07 12:14:05"}
]

如果业务需求发生了变化，比如接口要返回用户头像时，就需要后端去改代码，增加用户头像的字段：

[{"id": 1,"name": "jack","created_at": "2021-05-10 13:14:15","avatar": "https://www.avatar.com/01.jpg"},{"id": 2,"name": "tom","created_at": "2021-05-07 12:14:05","avatar": "https://www.avatar.com/02.jpg"}
]

当后面又要添加字段时，又需要后端去改接口的代码。

有时候后端沉迷在思考中，可能不会很快响应，前端就要等着，或者去模拟些假数据来搞，这样不好。

于是有人就说能不能提供一种接口：让前端来指定字段，让前端来做连表查询，让前端来做分页查询呢？答案是当然有的，比如今天介绍的graphql就是其中的一种方式。

关于graphql

grapql的相关资料可以看：https://graphql.cn/learn/

它提供了一套完整的查询语句，只要后端支持graphql，就能立马使用。一定程度上减少了后端的工作，给前端提供了更好的用户体验。

注意，不是说有了grapql，后端就不用写查询代码，可以开心的去摸鱼了。不是的奥，后端不用写REST API的代码了，但要写graphql的语句哦。

不过，有一说一，有的场景下它还是非常适合的，比如你是做saas的，要开放些查询api给客户，用它呢就可以减少很多工作。

我们来一起试试吧

服务端

我们来搞个服务端，这里就node js来做例子，基于koa框架的apollo-server-koa。
先安装下：

npm i apollo-server-koa
npm i graphql

写个app.js，启动它吧：

const Koa = require('koa');
const { ApolloServer, gql } = require('apollo-server-koa');async function startApolloServer() {const typeDefs = gql`type Query {hello: String,hot: String}`;// Provide resolver functions for your schema fieldsconst resolvers = {Query: {hello: () => 'Hello world!',hot: () => 'Very hot!'},};const server = new ApolloServer({ typeDefs, resolvers });await server.start();const app = new Koa();server.applyMiddleware({ app });await new Promise(resolve => app.listen({ port: 4000 }, resolve));console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);return { server, app };
}startApolloServer();

启动完成后，访问http://localhost:4000/graphql就能看到一个grahql的查询界面了

其他客户端

图形客户端

好比我们的REST API有postman这样的接口调试工具一样(postman后面也会支持graphql)，graphql也有很多的图形客户端：
https://blog.bitsrc.io/13-graphql-tools-and-libraries-you-should-know-in-2019-e4b9005f6fc2

我用的是GraphiQL 和 Altair 。

Altair的颜值高一些，安装也简单，直接去官网下载安装包即可。

后端请求

有时候可能需要后端请求graphql接口，聪明的你已经发现了，它也是http请求，只是格式参数和REST API有些不一样。

比如在shell下，我们可以这样：

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

比如在node下，我们可以这样：

fetch('/graphql', {method: 'POST',headers: {'Content-Type': 'application/json','Accept': 'application/json',},body: JSON.stringify({query: "{ hello }"})
}).then(r => r.json()).then(data => console.log('data returned:', data));

fetch看起来可能有点啰嗦，那我们可以用现成的库，比如用graphql-request：

import { request, gql } from 'graphql-request'const query = gql`{Movie(title: "Inception") {releaseDateactors {name}}}
`request('https://api.graph.cool/simple/v1/movies', query).then((data) => console.log(data))

又或者在PHP下，我们可以封装一个方法：

public static function send_query(string $endpoint,string $query,array $variables = [],?string $token = null){$headers = ['Content-Type: application/json'];if ($token) {$headers[] = $token;}$content = ['query' => $query];if(!empty($variables)){$content['variables'] = $variables;}$data = file_get_contents($endpoint, false, stream_context_create(['http' => ['method' => 'POST','header' => $headers,'content' => json_encode($content),]]));if($data){$data = json_decode($data,true);return $data;}else{$error = error_get_last();return $error;}}

查询

有了前面的准备工作，我们就可以开始测试了。
先来查个hello吧：

{hello
}

可以看到会返回一个结果：

{"data": {"hello": "Hello world!"}
}

OK，今天的介绍就到这里了？？？就这？我REST API完全可以hold住这种hello world的需求呀，要你何用？

OKK，不急，我们明天继续。

graphql入门使用-查询相关推荐

【ReactJs+springBoot项目——租房】第3章：OSS存储图片+本地存储+ 房源列表查询+GraphQL入门
图片存储解决方案的分析阿里云OSS存储方案的实现本地存储方案的实现整合前端系统实现图片上传功能实现房源列表查询功能 GraphQL的入门 1.图片存储解决方案在新增房源中, ...
GraphQL 入门第一篇
GraphQL 入门在接下来的一系列文章中,我们会了解 GraphQL 是什么,它是如何运作以及如何使用它.在找如何搭建 GraphQL 服务的文档?这有一些类库可以帮你用多种不同语言实现 Grap ...
graphql入门_GraphQL入门指南
graphql入门 by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) GraphQL入门指南 (A Beginner's Guide to Gr ...
GraphQL 入门
## GraphQL 入门 GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义).GraphQL 并没有和任何特定数据库或者存储引擎 ...
Mybatis最入门---分页查询（逻辑分页与SQL语句分页）
[一步是咫尺,一步即天涯] 到目前为止,我们介绍的Mybatis种种查询都是一次性的查询出所有结果并返回给上层.但是,在实际开发过程中,在大量数据存在的情况下,是很少这么做的.本文,我们将从逻辑分页, ...
graphql 嵌套查询_了解GraphQL中的查询
graphql 嵌套查询介绍 (Introduction) In this tutorial, we'll take an in-depth look at queries in GraphQL s ...
Graphql入门_1
GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API.服务端可以用任何的语言实现.具体的你可以查看Facebook关于GraphQL的文档和各种语言的实现 GraphQ ...
Graphql入门_0
GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API.服务端可以用任何的语言实现.具体的你可以查看Facebook关于GraphQL的文档和各种语言的实现 GraphQ ...
快速入门mybatis(查询、添加日志、插入)
快速入门mybatis(查询.添加日志.插入) 参考学习视频网址:https://www.bilibili.com/video/BV185411s7Ry?p=9&spm_id_from=pag ...

graphql入门使用-查询

前言

关于graphql

服务端

其他客户端

图形客户端

后端请求

查询

graphql入门使用-查询相关推荐

最新文章

热门文章