1.GRAND技术栈介绍

Utopia_xxl
220 阅读13分钟

什么是GRAND

GRAND指的是使用GraphQL、React、Apollo和Neo4j Database一起构建复杂的、数据密集型的全栈应用程序。从本教程能够了解到(从数据库到api)以及前端客户端数据获取代码中使用图形数据模型对开发人员的生产力、性能和直观的好处。

整本书分为三个部分，共同展示了如何构建一个具有搜索和个性化推荐等功能的全栈业务评论应用程序。第一部分关注Neo4j的服务器端GraphQL，构建的API功能不仅包括简单的数据获取，还包括使用图形数据库遍历实现自定义逻辑。第二部分着重于使用React和Apollo Client构建前端。最后一节将探讨更真实的问题，如授权、部署和速率限制。

1. 什么是GRAND技术栈

  • GraphQL：用来构建我们的API
  • React：构建用户接口和web应用
  • Apollo：在sever和client上运行GraphQL
  • Neo4j Database：用neo4j数据库来存储和操作我们的数据

这是GRAND技术栈的架构图

image-20220622215330057.png 这本书的重点是学习如何使用GraphQL构建应用程序，所以当我们涉及到GraphQL时，它将在构建应用程序和使用其他技术的背景下完成:如何设计我们的模式，如何与数据库集成，如何构建一个可以查询我们的GraphQL API的web应用程序，如何在我们的应用程序中添加认证等等。

劝退提示：本教程并不是零基础入门教程，因此你需要对上面提到的技术有一定的了解。当然，其中任意的一个环节可以用相似的技术替换，例如：Vue 替换 React

1.1 GraphQL

GraphQL的核心是构建api的规范。GraphQL规范描述了一种API查询语言和实现这些请求的方法。在构建GraphQL API时，我们使用严格的类型系统来描述可用的数据。这些类型定义成为API的规范，客户端可以根据这些类型定义自由地请求所需的数据，这些类型定义还定义了API的入口点。

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

也许你可以先去了解一些基础的)GraphQL知识再来深入探索以下几个方面

1.1.1 GraphQL类型定义

是围绕定义数据类型、字段以及它们如何在API中连接的类型定义。这些类型定义成为API的模式，它从单个端点提供服务。 因为GraphQL服务可以用任何语言实现，所以使用一种与语言无关的模式定义语言(SDL)来定义GraphQL类型。

因为GraphQL服务可以用任何语言实现，所以使用一种与语言无关的模式定义语言(SDL)来定义GraphQL类型。

通过这样一个电影搜索的例子也许能够更好地理解，实际需求是：通过搜索电影名获取电影的详情信息，如年份，评分，描述，推荐一些可能改兴趣的电影。

image-20220622222954577.png 首先，需要创建简单的GraphQL类型定义

继续劝退：如果不了解语法还是先去找个GraphQL基础教程看看吧

image-20220622223309688.png 以Move为例，定义了Move类型object，包含了三个字段，属性moviedId的类型为ID（GraphQL中的原生类型，唯一标识符）并且不能为空（用 ! 表示），title的数据类型是字符串，actors的数据类型是一个数组，数组的内的元素类型是Actor。

可能你会想这个GraphQL的graph在哪，其实就在前面定义的type中，Movie就是定义了一个图（由节点和边组成的数据结构）

image-20220622225249003.png

了解了GraphQL是如何定义数据类型后，再来看看是如何进行查询操作的。

1.1.2 GraphQL查询

GraphQL查询定义了对由类型定义定义的图的遍历，以及请求查询返回的字段子集;这就是所谓的选择集。在这个查询中，我们从allMovies入口点开始，遍历图以找到连接到每个电影的演员。然后，对于这些演员中的每一个，我们横贯到所有其他与他们有关的电影。我们的GraphQL查询如下所示。

image-20220622225614350.png

Note：我们需要精确指定查询的每一个字段，不能直接写一个自定义的object type

image-20220622230222055.png

对应的查询结果为

image-20220622230244263.png

image-20220622230312851.png

GraphQL是数据层无关的，因此解析器可以查询一个或多个数据库，甚至从另一个API(甚至是REST API)获取数据。

1.1.3 GraphQL的优点

过渡请求或请求不足

使用GraphQL不会出现REST请求不足或者过渡请求的请求，GraphQL会精确返回所有的请求数据

通过GraphQL，我们可以在一个请求中完成这个任务，解决了抓取过度和抓取不足的问题。这将提高服务器上的性能，因为我们在数据层花费的计算资源更少了，通过网络发送的总体数据更少了，并且能够通过对API服务的单个网络请求来呈现我们的应用程序视图，从而减少了延迟。

GraphQL规范

GraphQL是一个客户端-服务器通信规范，它描述了GraphQL API查询语言的特性、功能和能力。有了这个规范，就可以清楚地指导如何实现GraphQL API，并清楚地定义什么是GraphQL，什么不是GraphQL。

REST没有规范，相反有许多不同的实现，从REST式到超媒体应用程序状态引擎(HATEOAS)。将规范作为GraphQL的一部分可以简化关于端点、状态代码和文档的争论。所有这些都内置在GraphQL中，为开发人员和API设计人员带来了生产力。该规范为API实现者提供了一条清晰的路径。

使用GraphQL将会越来越轻松

REST将自己建模为资源的层次结构，但与api的大多数交互都是根据关系完成的。例如，给定我们的电影查询，对于这部电影，向我展示与它相连的所有演员，对于每个演员，向我展示他们表演过的所有其他电影——我们正在查询关系。

GraphQL还可以帮助统一来自不同系统的数据。由于GraphQL与数据层无关，我们可以构建GraphQL api，将来自多个服务或微服务的数据集成在一起，并提供一种清晰的方式将来自不同系统的数据集成到单个GraphQL schema中。

GraphQL还可以用于在基于组件的数据交互模式中划分应用程序中的数据获取。因为每个GraphQL查询都可以准确地描述图遍历和要返回的字段，所以用应用程序组件封装这些查询可以帮助简化应用程序开发和测试。当使用React构建应用就会看到该如何使用。

Introspection

自我查找是GraphQL的一个强大特性，它允许我们向GraphQL API查询它支持的类型和查询。自我查找成为一种自记录API的方式。利用自我查找的工具可以提供人类可读的API文档、可视化工具，并利用代码生成来创建API客户端。

1.1.4 GraphQL的缺点

GraphQL不是万能的，我们不应该认为GraphQL是所有api相关问题的解决方案。采用GraphQL的一个最显著的挑战是，在使用GraphQL时，REST中一些很好理解的实践并不适用。

具体的就不介绍了，因为看到这个地方你应该能明确知道你一定要使用GraphQL

GraphQL的局限性

GraphQL是一种API查询语言，而不是一种数据库查询语言，理解这一点很重要。GraphQL缺乏数据库查询语言所需的许多复杂操作的语义，例如聚合、项目和可变长度路径遍历。

例如配合neo4j的查询语言Cypher

1.1.5 GraphQL IDE

GraphQL 自带一个web IDE 能够很方便查询API

1.2 React

React是一个声明式的、基于组件的库，用于使用JavaScript构建用户界面。React使用一个虚拟DOM(实际文档对象模型的副本)来高效地计算在状态和数据发生变化时呈现视图所需的DOM更新。这意味着用户设计映射到应用程序数据的视图，React处理DOM更新的有效呈现。组件封装数据处理和用户界面呈现逻辑，而不暴露其内部结构，因此可以很容易地将它们组合在一起构建复杂的应用程序。

不过多介绍DDDD

你当然也可以使用Vue /doge

1.3 Apollo

Apollo是一个工具集合，它使GraphQL在服务器和客户端上的使用更加容易。我们将使用Apollo Server(一个Node.js库，用于构建GraphQL API)和Apollo Client(一个客户端JavaScript库，用于从应用程序中查询GraphQL API)。

1.3.1 Apollo Server

Apollo Server允许我们通过定义类型定义和解析器函数来轻松地启动Node.js服务器来服务于GraphQL端点。Apollo Server可以用于许多不同的web框架;然而，默认和最流行的是Express.js。Apollo Server还可以与Amazon Lambda和谷歌云函数等无服务器函数一起使用。

使用npm安装

npm install apollo-server

1.3.2 Apollo Client

Apollo Client是一个用于查询GraphQL api的JavaScript库，并集成了许多前端框架，包括React、Vue.js以及iOS和Android的原生移动版本。我们将使用React Apollo Client集成来实现在React组件中通过GraphQL获取数据。Apollo Client处理客户端数据缓存，也可用于管理本地状态数据。

使用npm安装

npm install react-apollo

1.4 Neo4j database

Neo4j是一个开源的原生图形数据库。与其他使用table或document作为数据模型的数据库不同，Neo4j使用的数据模型是一个图，具体称为属性图数据模型，并且能够以tu的形式去建模，存储和查询。 Neo4j等图形数据库为处理图形数据和执行复杂的图遍历(比如GraphQL查询定义的那些)进行了优化。

与GraphQL一起使用图形数据库的好处之一是，我们在整个应用程序堆栈中维护相同的数据模型，在前端、API和后端处理图形。与其他数据库系统(如关系数据库)相比，图数据库的另一个优点与性能优化有关。许多GraphQL查询最终会嵌套好几层——相当于关系数据库中的JOIN操作。图数据库为高效地执行这些图遍历操作进行了优化，所以图形数据库自然是GraphQL API的后端。

Note： 需要注意的是，我们没有直接使用GraphQL查询数据库。虽然有针对GraphQL的数据库集成，但重要的是要意识到GraphQL API是位于我们的应用程序和数据库的中间件。

1.4.1 属性图数据模型

像许多图形数据库一样，Neo4j使用属性图模型。属性图模型的组件是

  • 节点:数据模型中的实体或对象
  • 关系：连接节点的边
  • 标签：节点的分组语义
  • 属性：key-value，属性键值对，节点和边都有属性

image-20220623002824985.png

属性图数据模型允许我们以灵活的方式表达复杂的、连接的数据。这个数据模型还有一个额外的好处，那就是在处理一个领域时，它与我们通常考虑将相关数据紧密地映射在一起。

1.4.2 Cypher查询语言

Cypher是一种声明式图查询语言，用于Neo4j和其他图数据库和图计算引擎。您可以认为Cypher类似于SQL，但它是为图形数据设计的。暗语的一个主要特征是模式匹配。有了Cypher中的图形模式匹配，我们可以使用类似ascii的符号来定义图形模式。Cypher是通过openCypher项目实现的开放标准。让我们看看下面清单中的一个简单的Cypher示例，查询连接到这些电影的电影和演员。

image-20220623003245749.png

Cypher是一种开源查询语言，通过openCypher项目和其他七个图形数据库和图形系统实现Cypher。

1.4.3 Neo4j tooling

如果没有安装Neo4j Desktop 下去安装了再过来

neo4j 客户端 drivers

Neo4j JavaScript驱动程序有一个node.js和一个浏览器版本(允许直接从浏览器连接到数据库);然而，在本教程中，我们只使用node.js版本

npm install neo4j-driver

我们将学习如何在GraphQL解析器函数中使用Neo4j JavaScript客户端驱动程序来实现GraphQL API中的数据获取。

image-20220623110301887.png

neo4j-graphql .js库是Neo4j的GraphQL到Cypher查询执行层。它可以与任何JavaScript GraphQL服务器实现(如Apollo server)一起工作。我们将学习如何使用这个库来:

  1. 使用GraphQL类型定义来驱动Neo4j数据库模式。
  2. 从GraphQL类型定义生成一个完整的CRUD GraphQL API。
  3. 为任意GraphQL请求生成单个Cypher数据库查询。
  4. 实现定义在Cypher中的自定义逻辑。

1.5 如何组合到一起

现在我们已经了解了GRANDstack的每个单独部分，让我们看看在全堆栈应用程序的上下文中所有内容是如何组合在一起的。在本章中，当我们看到每种技术的例子时，我们使用了简单的电影数据相关的例子。让我们看看一个简单的GRANDstack电影搜索应用程序是如何在幕后工作的。

需求如下：

  • 允许用户按标题搜索电影
  • 显示所有匹配电影的结果和细节
  • 向用户推荐可能感兴趣的电影

如果这个应用程序是使用GRANDstack构建的，下面是不同组件如何按照从客户端应用程序的请求流组合在一起，根据标题搜索电影，到GraphQL API，然后从Neo4j数据库解析数据，然后返回给客户端，在更新的用户界面视图中呈现结果

image-20220623184724637.png

1.6 总结

  • GRANDstack是一个用GraphQL构建全栈web应用的技术集合，由GraphQL、React、Apollo和Neo4j Database组成。
  • GraphQL是用于实现请求的API查询语言和运行时。我们可以对任何数据层使用GraphQL。要构建GraphQL API，我们首先定义类型，其中包括每种类型上可用的字段以及它们如何连接，从而描述数据图。
  • React是一个用于构建用户界面的JavaScript库。我们使用JSX来构造封装数据和逻辑的组件。这些组件可以组合在一起，从而可以构建复杂的用户界面。
  • Apollo是一组用于在客户端和服务器上使用GraphQL的工具。Apollo Server是一个用于构建GraphQL api的node.js库。Apollo Client是一个JavaScript GraphQL客户端，它集成了许多前端框架，包括React。
  • Neo4j是一个开源的图形数据库，它使用Property graph数据模型，该模型由节点、关系、标签和属性组成。我们使用Cypher查询语言与Neo4j进行交互。
avatar
文章
阅读
粉丝