JS前端可视化GraphQL使用详解

目录
  • 正文
  • 什么是 GraphQL?
  • 什么是 GraphiQL?
  • 开始
  • 结尾

正文

了解事物幕后的运作方式往往有好处,但并非总是如此。 因为不必使事情过于复杂。而可视化图形界面在处理这么一个场景中,是首当其冲的。

在本文中,我将带你了解如何使用 GraphiQL 来辅助 GraphQL 的开发。

什么是 GraphQL?

在我们谈论 GraphiQL 之前,让我们先谈谈 GraphQL

GraphQL 是一种用于应用程序编程接口 (API) 的开源数据查询和操作语言,也是一种使用现有数据完成查询的运行时。

GraphQL 于 2012 年由 Facebook 内部开发,然后于 2015 年向公众发布。

与 REST方法相比,开发人员更喜欢它,但本篇文章我们不会关注关于 RESTful 方法和 GraphQL 的优缺点的比较。

什么是 GraphiQL?

现在,如果你熟悉 RESTful API,你可能会知道 Postman 和 Insomnia 之类的工具,因为它们不仅可以帮助我们快速可视化 API 开发,还可以帮助我们更快地完成工作。

同样,你可以将 GraphiQL 视为 Postman 或 Insomnia。 因为 GraphiQL 是 GraphQL 集成开发环境 (IDE)。

它这是一个强大的工具,可以帮助你直观地构建 GraphQL 查询的工具。

在我们开始学习之前,希望你具备以下知识:

  • 对 Node.js, npm 有基本了解;
  • 了解基本的 express.js 搭建服务器的设置;

开始

我们正在构建一个 express.js 服务器,它是一个 Node.js 函数并将其放入变量的地方;应用程序。

现在,我们将创建一个文件夹来存放我们的项目文件。

进入新创建或所需的文件夹后,在命令行界面 (CLI) 上运行它:

npm init -y

这将在你所在的文件夹中创建一个 package.json 文件。

接下来要做的是安装我们项目所需的依赖包。 运行:

npm install graphql express-graphql express。

你应该将 "dev": "node app.js" 添加到 package.json 文件中的 script 对象中:

script: {
  "dev": "node app.js"
}

安装完成后,你的 package.json 文件应如下所示:

因为 express.js 不知道 如何与 graphql 进行通信,所以我们安装了 express-graphql 依赖包。

接着,在你的文件夹中,创建一个名为 app.js 的文件并填入以下代码:

//app.js
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema/schema');
const app = express();
// bind express with graphql
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}));
app.listen(2020, () => {
    console.log('now listening at port 2020');
});

这段代码是我们工作的切入点。

在第 4 行,我们引入了一个自定义路径 schema.js。后面我会提到它。

然后第 5 行是我们实例化 express 函数并将其赋值给 app 这个常量。

从第 7 行到第 10 行,我们首先调用 app.use(),它允许我们在 express.js 中注册中间件。

每当我们点击路由 /graphql 时,它始终会调用 graphqlHTTP() ,并添加对象。

我们希望能够以图形方式看到正在发生的事情,因为我们给 graphiql 一个“true”值。

现在,在项目的文件夹中创建一个文件夹。然后在刚刚创建的文件夹中,创建一个名为 “schema.js” 的文件。

将以下代码填入到 schema.js 文件中:

// schema.js
const graphql = require("graphql");
const _ = require("lodash");
const { countries } = require("./country");
const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID } = graphql;
const CountryType = new GraphQLObjectType({
  name: "Country",
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    capital: { type: GraphQLString },
  }),
});
const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    country: {
      type: CountryType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return _.find(countries, { id: args.id });
      },
    },
  },
});
module.exports = new GraphQLSchema({
  query: RootQuery,
});

代码中我们使用到了 lodash 这个包,所以请在命令行中运行:npm intsall loadash 以安装它。

schema 文件夹中,我们需要创建一个名为 country.js 的文件并填入以下代码:

const countries = [
    { name: 'Portugal', capital: 'Libson', id: '1' },
    { name: 'Canada', capital: 'Ontario', id: '2' },
    { name: 'Nigeria', capital: 'Abuja', id: '3' },
];
module.exports = {countries};

最后,你的项目文件夹应如下所示:

现在,回到 schema/schema.js

从第 2 行到第 5 行,我们导入 schema/country.js 的内容,该内容的结构与 GraphQL 服务器所需的内容结构是保持一致的。

从第 6 行到第 13 行,变量 CountryType 由来自 graphql 的 GraphQLObjectType() 方法实例化。 其中有两个属性:name 和 fields

name 的值为 “Country”,其中作为属性的字段也是一种隐式返回对象(id; name capital)的方法。

从第 14 行到第 25 行,我们有一个新的 GraphQLObjectType() 实例,它被放在变量 RootQuery 中。 我们看到我们正在使用 Loadash 通过 id 返回 countries

如果一切都正确完成,你应该能够在 GraphiQL 界面中运行你的 GraphQL。

运行 npm run dev

然后,在你的浏览器中,转到 http://localhost:2020/graphql,你应该会看到:

是的,现在你可以使用 GraphiQL 界面测试你的 API。 你可以尝试通过在浏览器中粘贴以下内容来获取我们 country.js 中 id 为 1 的 name 和 capital:

{
  country(id: 1) {
    name
    capital
  }
}

完成此操作后,点击“Play”图标,你应该会在屏幕的另一侧看到如下响应:

结尾

现在,我们已经完成了关于如何使用 GraghQL 的默认可视化工具 GraphiQL 可视化你的 GraphQL 模式的教程。

我们也已经看到 GraphQL 提供了一种很好的方法来查询 API 中的某些内容。

以上就是JS前端可视化GraphQL使用详解的详细内容,更多关于JS前端可视化GraphQL的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue中对接Graphql接口的实现示例

    说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点,可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的 一.对原来的Express返回Graphql项目修改 本章节使用的代码是express返回Graphql的代码,在使用前要先对代码进行基本的配置,比如处理跨域问题(Graphql本质也是发送一个http请求,既然是这样在vue项目中自然存在跨域的问题,需要先处理) 1.安装跨域的包,并且配置中间件 npm inst

  • vue中使用GraphQL的实例代码

    上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解.这里我们讲讲如何在Vue中使用GraphQL. 1. 初始化vue项目 npm install -g @vue/cli vue create vue-apollo-demo 选择默认cli的默认模板就可以了 添加 /src/graphql/article.js . /src/utils/graphql.js 两个文件. ├── node_modules └── public │ ├── favicon.ico │ └── inde

  • 在vue项目中集成graphql(vue-ApolloClient)

    1.什么是graphql GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义.比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误 2.按需获取 在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段

  • graphql---go http请求使用详解

    1. Graphql是什么? GraphQL是Facebook 在2012年开发的,2015年开源,2016年下半年Facebook宣布可以在生产环境使用,而其内部早就已经广泛应用了,用于替代 REST API.facebook的解决方案和简单:用一个"聪明"的节点来进行复杂的查询,将数据按照客户端的要求传回去,后端根据GraphQL机制提供一个具有强大功能的接口,用以满足前端数据的个性化需求,既保证了多样性,又控制了接口数量. GraphQL并不是一门程序语言或者框架,它是描述你的请

  • JS前端可视化GraphQL使用详解

    目录 正文 什么是 GraphQL? 什么是 GraphiQL? 开始 结尾 正文 了解事物幕后的运作方式往往有好处,但并非总是如此. 因为不必使事情过于复杂.而可视化图形界面在处理这么一个场景中,是首当其冲的. 在本文中,我将带你了解如何使用 GraphiQL 来辅助 GraphQL 的开发. 什么是 GraphQL? 在我们谈论 GraphiQL 之前,让我们先谈谈 GraphQL. GraphQL 是一种用于应用程序编程接口 (API) 的开源数据查询和操作语言,也是一种使用现有数据完成查

  • template.js前端模板引擎使用详解

    本文介绍了template.js前端模板引擎使用,分享给大家,具体如下: 下载地址:https://github.com/yanhaijing/template.js 作者编写的文档:https://github.com/yanhaijing/template.js/blob/master/README.md 源码学习 默认的开始标签和结束标签分别是: sTag: '<%',//开始标签,可以重写,我项目中使用的是<: eTag: '%>',//结束标签,我项目中使用的是:> 快速

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • BootStrop前端框架入门教程详解

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

  • Skypack布局前端基建实现过程详解

    目录 引言 不一样的CDN 按需polyfill 处理请求的流程 总结 引言 已经有越来越多前端开发者放弃webpack,改用vite作为项目打包工具. 其中最主要的原因是 —— vite在开发环境基于ESM规范实现的Nobundle模式,节省了代码打包的时间(当然,也有ESBuild的功劳). 而在生产环境,当前仍有打包的需求. 随着浏览器的迭代,ESM规范兼容性越来越好,终有一天会进入生产环境大面积可用的状态. 届时生产环境打包将不再是刚需. 另一方面,从HTTP协议的角度看,在HTTP/1

  • React跨端动态化之从JS引擎到RN落地详解

    目录 一 为什么跨端动态化迫在眉睫 二 首当其冲的为什么是 React Native 三 JS 引擎让跨端动态化成为可能 四 走进 React Native 的世界 五 总结 一 为什么跨端动态化迫在眉睫 目前很多互联网大厂的移动端开发都在朝着跨端动态化方向发展.由于快速迭代开发或者对原生包体积要求严格,及其对资源成本的把控,实现跨端动态化迫在眉睫.我们先来看看 Native 原生开发的一些不足之处: 1 原生开发周期时间长,审核周期长,会影响到需求发布和迭代效率,有些场景下会更加棘手,比如修复

  • 开箱即用的Node.js+Mysql模块封装实现详解

    目录 前言 正文 项目目录 sql.js dbconfig.js db.js 增 删 改 查一个 查全部 paramList 如何使用 搞定 前言 最近在写毕设,采用的是学弟+自己的技术栈,运用Vue3+ElementPlus搞前端,Node.js express做后端,毕竟,java那东西确实不在我技术栈里. 于是乎,我抱着能CV就不要自己敲的心态,前去了某C站,C回了一个封装好了看上去存在可用性的基础sql模块,结果,踩了大坑. 痛定思痛,我采用了学弟+腾讯会议的debug方式,于事发当天下

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

  • JS中多种方式创建对象详解

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('

  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

随机推荐