前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >初步接触GraphQL

初步接触GraphQL

作者头像
frontoldman
发布于 2019-09-02 09:19:36
发布于 2019-09-02 09:19:36
55500
代码可运行
举报
文章被收录于专栏:樯橹代码樯橹代码
运行总次数:0
代码可运行

GraphQL

什么是GraphQL

Facebook开源的一个数据查询语言

1、GraphQL是一门语言,有自己的语法,这点和其他编程语言是类似的 2、GraphQL是一个runtime,可以认为它是一个运行在服务器上的可以理解和响应使用GraphQL语言的请求应用程序,类似一个服务端的GraphQL翻译

GraphQL的意义

RESTful Api的弊端随着应用的扩展,被逐渐放大,比如接口调用次数增多,耗时太长。每个接口做单独的开发却又古老而不合时宜。所以GraphQL的出现是为了更好的降低数据之间的网状关系带来的开发复杂度。

如何使用

一个简单的GraphQL的语法案例如下,就是一个输入格式如下(不是JSON

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    {
        user(id: 42) {
            firstName
            lastName
            email
        }
    }

会被转换成如下输出

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    {
         "data": {
             "user": {
                 "firstName": "John",
                 "lastName": "Doe",
                 "email": "john@example.com"
             }
         }
    }

这可以看做是一次请求响应的过程

一个查询定义如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const queryType = new GraphQLObjectType({
         name: 'RootQuery',
         fields: {
             hello: {
             type: GraphQLString,
             resolve: () => 'world'
         }
     }
});

const mySchema = new GraphQLSchema({
     query: queryType
});

const inputQuery = `{ hello }`

graphql(mySchema, inputQuery).then(result => {
     console.log('Server Answer :', result.data);
});

打印log如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Server Answer : { hello: 'world' }

GraphQL内置一些基础数据类型,然后可以自定义复杂数据类型,数据类型之间可以互相嵌套和引用,这就可以组成可配置的数据结构

GraphQL是一门强类型的语言,每个字段都必须要要有严格的格式约束

这门语言有很多种编程语言的实现,graphql.js就是其中一种

对于前端而言,最简单的使用过程就是拼接上文的hello这样子的Query,来查询数据

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用 GraphiQL 可视化 GraphQL 架构
了解事物幕后的运作方式往往有好处,但并非总是如此。 因为不必使事情过于复杂。而可视化图形界面在处理这么一个场景中,是首当其冲的。
前端修罗场
2023/10/07
8850
使用 GraphiQL 可视化 GraphQL 架构
GraphQL 入门详解
传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。graphQL提供一种全新数据查询方式,可以只获取需要的数据,使api调用更灵活、高效和低成本。
Nealyang
2019/09/29
2.1K0
GraphQL 入门详解
2024年Node.js精选:50款工具库集锦,项目开发轻松上手(三)
大家好,今天,继续我们的Node.js探索之旅,深入了解一系列强大的工具库,它们能够帮助我们在项目开发中提升效率、加固安全、优化性能,甚至更优雅地处理数据和逻辑。
前端达人
2024/03/14
3810
2024年Node.js精选:50款工具库集锦,项目开发轻松上手(三)
GraphQL+Koa2实现服务端API结合Apollo+Vue
注意:GraphQL 是 api 的查询语言,而不是数据库。从这个意义上说,它是数据库无关的, 而且可以在使用 API 的任何环境中有效使用,我们可以理解为 GraphQL 是基于 API 之上的一 层封装,目的是为了更好,更灵活的适用于业务的需求变化
前端进阶之旅
2022/07/29
5.3K1
GraphQL+Koa2实现服务端API结合Apollo+Vue
GraphQL学习第五篇 -GraphQl 中定义schema实现增、删、改、查。
const DB = require('../model/db.js'); const { GraphQLObjectType, GraphQLString, GraphQLInt, GraphQLList, GraphQLSchema, GraphQLID, GraphQLFloat, GraphQLNonNull } = require('graphql') // 1.定义导航的schema,映射要操作表的字段 var NavSchem
越陌度阡
2020/11/26
7710
GraphQL学习第三篇 -在Express中使用GraphQL
在Express中使用GraphQL主要有以下几步: 1. 安装 graphql 和 express-graphql。 2. 引入express-graphql。 3. 引入自定义的schema,其中定义schema又分为以下几步: (1). 定义查询字段的schema类型。 (2). 定义一个根 , 根里面定义调用schema类型的方法。 (3). 把根挂载到 GraphQLSchema。 4. 配置中间件,注意要放在实例化express之后。 下面用代码来说明具体的实现步骤: 首先是Express中的主
越陌度阡
2020/11/26
1K0
GraphQL到底怎么使?看看智联前端团队技术沉淀
此文是作者考虑 GraphQL 在 Node.js 架构中的落地方案后所得。从最初考虑可以(以内置中间件)加入基础服务并提供完整的构建、发布、监控支持,到最终选择不改动基础服务以提供独立包适配,不限制实现技术选型,交由业务团队自由选择的轻量方式落地。中间经历了解除误解,对收益疑惑,对最初定位疑惑,最终完成利弊权衡的过程。
coder_koala
2020/07/01
2.3K0
GraphQL 分享 实战篇
三种基本操作 Query(a read‐only fetch), Mutation(a write followed by a fetch), Subscription(订阅,不常用,适合长连接业务)
mafeifan
2018/09/10
1.4K0
GraphQL 分享 实战篇
使用 React 和 GraphQL 做一个todo list
英文:Igor Ribeiro Lima 译文:众成翻译/乐何 zcfy.cc/article/graphql-overview-build-a-to-do-list-api-with-a-react-front-end-mdash-sitepoint 设想你想要参考食谱烤一个蛋糕。你将需要一些原料,并且一些合适的量。如果你能拿一个盒子装好你烘焙所需要的各种原料 ,并且已经称量好匹配菜谱的份量,那肯定会让烘焙更简单。如果你把前端 UI设想成一块蛋糕的话,那这就是GraphQL所做的事。 在本教程中我们将
前端教程
2018/03/05
2K0
使用 React 和 GraphQL 做一个todo list
【GraphQL】225-GraphQL真香入门教程
GraphQL 是 Facebook 开发的一种 API 的查询语言,与 2015 年公开发布,是 REST API 的替代品。
pingan8787
2019/07/25
8.1K0
【GraphQL】225-GraphQL真香入门教程
GraphQL学习第四篇 -在Koa中使用GraphQL
在Koa中使用GraphQL主要有以下几步: 1. 安装 graphql、koa-graphql 和 koa-mount。 2. 引入koa-mount 和 koa-graphql。 3. 引入自定义的schema,其中定义schema又分为以下几步: (1). 定义查询字段的schema类型。 (2). 定义一个根 , 根里面定义调用schema类型的方法。 (3). 把根挂载到 GraphQLSchema。 4. 配置中间件,注意要放在实例化koa之后。 下面用代码来说明具体的实现步骤: 首先是Koa中
越陌度阡
2020/11/26
1.4K2
Spring Boot - Rest VS GraphQL
REST(Representational State Transfer)和GraphQL都是用于构建Web服务的API设计和交互方式,它们有不同的特点和优劣势。
小小工匠
2023/09/20
2700
Spring Boot - Rest VS GraphQL
以C#一分钟浅谈:GraphQL 数据类型与查询
随着Web应用的发展,传统的REST API逐渐显现出其局限性,特别是在数据请求的灵活性和效率方面。GraphQL作为一种新的API查询语言,提供了更高效的数据获取方式,允许客户端精确指定所需的数据,从而减少网络传输量,提高应用性能。本文将从C#开发者的角度,浅谈GraphQL的数据类型与查询,包括常见的问题、易错点以及如何避免这些问题。
Jimaks
2024/12/03
1250
以C#一分钟浅谈:GraphQL 数据类型与查询
【译】如何在 Node.js 中创建安全的 GraphQL API
本文的目的是提供一份快速指南 -- 《如何快速在如何在 Node.js 中创建安全的 GraphQL API》。
腾讯IVWEB团队
2020/06/28
2.6K0
实践微服务,第14部分:GraphQL
在实践微服务系列博客的这一篇中,我们将看看如何使用GraphQL将Account对象提供给我们的客户端。
杜逸先
2018/06/27
2.6K0
实践微服务,第14部分:GraphQL
用Node.js创建安全的 GraphQL API[每日前端夜话0x61]
本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。
疯狂的技术宅
2019/05/15
1.7K0
GraphQL:现代API设计的革新
GraphQL是由Facebook在2012年开发并于2015年开源的一种查询语言,用于构建API。与传统的REST API相比,GraphQL提供了一种更高效、更灵活的数据查询方式。本文将从GraphQL的基本概念、核心特性、实际使用以及优缺点等方面进行详细介绍。
IT蜗壳-Tango
2024/06/23
2160
在 redux 应用中使用 GraphQL
在 Redux 应用中获取和管理数据需要做许多工作。正如 Sashko Stubailo 指出的:
疯狂的技术宅
2019/03/28
1.9K0
在 redux 应用中使用 GraphQL
GraphQL 的入门指南
今天最常讨论的术语之一是 API,很多人不知道 API 到底是什么,API 是 Application Programming Interface(应用程序编程接口)。顾名思义,它是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
前端小智@大迁世界
2019/01/29
2K0
GraphQL 的入门指南
C# 一分钟浅谈:GraphQL API 与 C#
这里推荐一篇实用的文章:《C++新旅程:三大特性之继承,详细介绍》,作者:【池央】。
Jimaks
2024/11/25
1360
推荐阅读
相关推荐
使用 GraphiQL 可视化 GraphQL 架构
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文