基于nodejs的Express框架以及GraphQL的JavaScript实现构建一个简单的GraphQL服务器

GraphQL是什么?GraphQL 是Facebook开发的一个应用层查询语言. 后端定义基于图的模式. 客户端可以按需查询需要的数据。GraphQL也并不是一个具体的后端编程框架,如果将REST看做适合于简单逻辑的查询标准,那么GraphQL可以做一个独立的抽象层,通过对于多个REST风格的简单的接口的排列组合提供更多复杂多变的查询方式。与REST相比,GraphQL定义了更严格、可扩展、可维护的数据查询方式。这个图展示的是查询流程,查询流程分为几个步骤, 涉及多个组件, 包括客户端应用程序(We
摘要由CSDN通过智能技术生成

GraphQL是什么?

GraphQL 是Facebook开发的一个应用层查询语言. 后端定义基于图的模式. 客户端可以按需查询需要的数据。GraphQL也并不是一个具体的后端编程框架,如果将REST看做适合于简单逻辑的查询标准,那么GraphQL可以做一个独立的抽象层,通过对于多个REST风格的简单的接口的排列组合提供更多复杂多变的查询方式。与REST相比,GraphQL定义了更严格、可扩展、可维护的数据查询方式。

GraphQL

这个图展示的是查询流程,查询流程分为几个步骤, 涉及多个组件, 包括客户端应用程序(Web, 手机, 桌面等App), 一个GraphQL服务器用于解析查询, 以及多个不同的数据来源。

GraphQL与之前Netflix出品的Falcor,都是致力于解决相同的问题:如何有效处理日益增长不断变化的Web/Mobile端复杂的数据需求。REST最大的功劳在于前后端分离与无状态请求,而REST的资源化的请求方式只适合面向简单的请求,对于具有复杂资源间关联的请求就有点无能为力。

如果你是学习后端的应该知道REST API需要为每个请求匹配相应的数据需求。而GraphQL的优点在与客户端数据要求发生变化时, 不需要修改后端. 因此, 你不必因为客户端数据需求的变更而改变你的后端。这解决了管理REST API中的最大的问题。

为什么解决了REST API的大问题, 看如下阐述:

注解:
只要你的业务模型没有发生变化, 从数据模型不会发生变化, 那么我们就不需要修改后端API。 前端按照需要的字段进行查询即可。如果业务发生了变化, 我们只需要修改GraphQL的模式定义, 并且实现对应的服务器端数据查询逻辑即可。传统的REST查询那些字段是固定的, 客户端不能指定, GraphQL可以让客户端指定要获取那些字段的数据, 这给客户端带来了极大的灵活性, 让前后端进一步分离。查询是可以嵌套的, 返回的JSON对象结构和GraphQL查询的结构是一样的, 这样更方便客户端自己定义数据的结构.

例如我们常见的需求,获取了一篇博客文章和对应评论与作者信息的数据。

GraphQL同样能够让客户端程序高效地批量获取数据。 例如, 看一看下面这个GraphQL请求:

{
   
  latestPost {
   
    _id,
    title,
    content,
    author {
   
      name
    },
    comments {
   
      content,
      author {
   
        name
      }
    }
  }
}

这个 GraphQL 请求获取了一篇博客文章和对应评论与作者信息的数据。下面是请求的返回结果:

{
   
  "data": {
   
    "latestPost": {
   
      "_id": "03390abb5570ce03ae524397d215713b",
      "title": "New Feature: Tracking Error Status with Kadira",
      "content": "Here is a common feedback we received from our users ...",
      "author": {
   
        "name": "Pahan Sarathchandra"
      },
      "comments": [
        {
   
          "content": "This is a very good blog post",
          "author": {
   
            "name": "Arunoda Susiripala"
          }
        },
        {
   
          "content": "Keep up the good work",
          "author": {
   
            "name": "Kasun Indi"
          }
        }
      ]
    }
  }
}

如果你使用的是REST的话,你要么需要前端查询多次,要么需要去添加一个新的接口调用多个REST API的请求才能获取这些信息,专门针对前端这种较为特殊的请求进行响应,而这样又不可避免地导致后端代码的冗余,毕竟很有可能这个特殊的请求与返回哪天就被废了。

GraphQL是一个规范

GraphQL是一个规范,因此, 它可以用于任何平台或语言。它有一个参考的实现 JavaScript, 由Facebook维护。还有许多社区维护的实现有许多种语言。之前我们用简短的描述说明了GraphQL是什么, 对其有了一个基本的映像, 现在我们通过实际的操作来感受GraphQL具体是一个什么东西。

首先在浏览器中打开: https://sandbox.learngraphql.com ,我们会看到下图的GraphiQL查询界面, 其界面窗口如下所示:

GraphiQL查询界面

然后在左侧的查询窗口中输入下面的查询语句:

{
  posts (category: PRODUCT) {
    _id,
    title,
    summary
  }
}

然后右侧出现如下内容:

{
   
  "data": {
   
    "posts": [
      {
   
        "_id": "03390abb5570ce03ae524397d215713b",
        "title": "New Feature: Tracking Error Status with Kadira",
        "summary": "Lot of users asked us to add a feature to set status for errors in the Kadira Error Manager. Now, we've that functionality."
      },
      {
   
        "_id": "0be4bea0330ccb5ecf781a9f69a64bc8",
        "title": "What Should Kadira Build Next?",
        "summary": "We are working on the next few major feature releases for Kadira. We would like to know your preference. Pre-order the feature you would most like to see in the next major release (scheduled for August 1)."
      },
      {
   
        "_id": "19085291c89f0d04943093c4ff16b664",
        "title": "Awesome Error Tracking Solution for Meteor Apps with Kadira",
        "summary": "Error tracking is so much important and goes side by side with performance issues. This is the public beta announcement of Kadira's error tracking solution."
      },
      {
   
        "_id": "1afff9dfb0b97b5882c72cb60844e034",
        "title": "Tracking Meteor CPU Usage with Kadira",
        "summary": "We've replaced EventLoop Utilization chart with actual CPU Usage. See why?"
      },
      {
   
        "_id": "3d7a3853bf435c0f00e46e15257a94d9",
        "title": "Introducing Kadira Debug, Version 2",
        "summary": "Today, we are introducing a new version of Kadira Debug. It comes with many UI improvements and support for CPU profiling."
      }
    ]
  }
}

这个体验了一下GraphQL是怎么工作的。下面就该构建案例

官方的简单的Quick Start教程

这里是以nodejs为基础的,所以需要nodejs环境请自行准备。

首先创建项目文件夹,然后进入该文件在该目录里打开控制台,然后使用npm安装必要的依赖以及nodejs的express框架:

npm init // npm初始

再一路回车到entry point: (index.js)可以键入 app.js 或者你所希望的名称,这里我们输入app.js,这是当前应用的入口文件。再一路回车。然后为了配合graphql我们需要进行安装相关依赖:

npm install express --save // 装 Express 并将其保存到依赖列表中
npm install graphql express express-graphql --save // express-graphql
npm install babel --save
npm install body-parser --save

先创建一个名为 app.js 的文件,然后输入以下代码:

// Import the required libraries
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值