【GraphQL】Apollo是什么？

2 年 ago

科, 雅

1 minute

这篇文章是关于2023年Qiita公司的日历| Qiita附属日历2023 – Qiita的第7天的文章。

首先

我們將解釋關於GraphQL的Apollo這次的主題。

尽管在上述的文章中提到了Apollo，但它并没有对Apollo自身进行解释，因此我想在本文中进行总结。

用一句话来表达的话，它指的是GraphQL的前端和后端库。

从下面的公式中引用图表

无论是Web、iOS、Android等客户端，在调用GraphQL时都会调用Apollo，
而在服务器端，也会使用Apollo将数据汇总并进行统一管理。

请按以下方程进行引用

Apollo Client是一个全面的JavaScript状态管理库，它使您能够使用GraphQL管理本地和远程数据。使用它来获取、缓存和修改应用程序数据，同时自动更新您的用户界面。

Apollo Client是一个用于与GraphQL服务器通信的JavaScript库。
在这里定义查询和变更。

从下面的公式中引用

Apollo Server是一个开源、符合规范的GraphQL服务器，与任何GraphQL客户端兼容，包括Apollo Client。

Apollo Server 是一个处理来自客户端的 GraphQL 操作的 JavaScript GraphQL 服务器。
在这里定义了 GraphQL 的模式和解析器。

什么是“リゾルバ”？
根据官方定义来说。

解析器是在您的架构中负责为单个字段填充数据的函数。

简单说，它指的是为模式定义的类型定义实际值和操作的函数。

以下是基本语法：

type Query {
  stringDog: String! # 毎回dogを返す
  stringCat: String! # 毎回catを返す
}

将上述的类型定义定义如下。

const resolvers = {
  Query: { 
    stringDog() {
      return 'dog';
    },
    stringCat() {
      return 'cat' 
    },
  },
};

補充一下，我們需要確保 type Query 和 Query: { 部分的鍵名一致，type 的 field 名稱 (鍵名) 必須與 resolvers 的 field 名稱 (鍵名) 一致。

此外，String和String!之间的区别在于是否允许空值（!代表不允许空值）。

这次，我们给大家介绍了Apollo本身的基本说明。

Apollo被称为前后端库，因为它具备了客户端和服务器的功能，可以同时操控它们，就像之前所描述的那样。

我打算在之后的某天使用Apollo发布示例代码。

希望这篇文章对大家有所帮助！