我第一次尝试使用GraphQL

首先

你好。我是一名有4个月开发经验的工程师。主要负责后端开发。
这次我要写关于GraphQL学习的内容。

GraphQL是什么？

GraphQL是一种API的查询语言，并且是一个用于执行这些查询的运行时的现有数据。来自GraphQL官方网站。

查询语言？运行时？因为不太清楚，所以要查一下。

查询语言

查询语言是一种用于向GraphQL服务器发出请求的语言。
有三种类型：用于获取数据的查询（query），用于更新数据的变更（mutation），以及来自服务器端的事件通知订阅（subscription）。

※GraphQL服务器：用于使用查询语言所需的服务器。它负责与数据源通信，根据需要获取和修改数据。

※服务器端：在服务器上运行的程序。

※运行时：执行程序时的相关操作。

GraphQL的結局就是一種用於使用查詢語言所需的組件，是這樣的嗎？

GraphQL的特点

GraphQL在于只有一个端点的特点。
端点是指访问API所需的URI。
在REST API中，需要对每个资源进行单独的请求，请求次数和资源数量成正比。
例如，获取”用户信息”、”关注者列表”和”发布列表”需要总共3次请求。
而GraphQL可以通过一次请求从一个端点获取所有必要的信息。

换句话说，通过将多个HTTP请求合并为一个请求，可以减少HTTP请求的次数，并且在执行查询时可以更精细地设置条件，从而只获取所需的数据。

试着实际运行GraphQL

只有进行调查还很难理解画面，所以我会亲自试一试。

使用Apollo构建GraphQL服务器

Apollo是一個可以輕鬆構建GraphQL服務器的庫。我們將參考ApolloServer的Get started教程進行設置。

新しいプロジェクト用フォルダ作成

mkdir graphql-server-example
cd graphql-server-example

新しいNode.jsプロジェクトをnpmで初期化

npm init --yes

実行結果

Wrote to /Users/i.kohei.noguchi/graphql-server-example/package.json:

{
  "name": "graphql-server-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装必要的库

执行Apollo Server应用程序需要安装apollo-server和graphql这两个组件。

npm install apollo-server graphql

実行結果

added 113 packages, and audited 114 packages in 10s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

执行后，内容将保存在node_modules目录中。然后，在项目的根目录下创建一个index.js文件，并写入以下内容。

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type User {
    name: String
    age: String
    gender: String
  }

  type Query {
    users: [User]
  }
`;

const users = [
  {
    name: 'noguko',
    age: '28',
    gender: 'female'
  },
  {
    name: 'noguo',
    age: '30',
    gender: 'male'
  },
];

const resolvers = {
  Query: {
    users: () => users,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`?  Server ready at ${url}`);
});

启动服务器

使用以下命令启动服务器。

node index.js

然后打开以下链接http://localhost:4000/进行访问。

? Server ready at http://localhost:4000/

执行查询

您可以在页面的左侧查看可以搜索架构或执行的查询列表。
中间是用于编写查询的编辑器部分，执行结果将在右侧显示。

接下来我们将对之前在index.js中编写的部分进行测试。
编写一个可以正常工作的查询，以验证是否有响应返回。
GraphQL的查询由根类型决定。
根类型包括Query、Mutation、Subscription等用于表示与数据源交互的操作的类型。
点击蓝色部分的ExampleQuery来执行查询，响应结果将会在右侧返回。

这个例子中，我们定义了一个名为User的模式，并在其下定义了数据源。
模式是用来表达GraphQL API规范的工具，用于定义客户端可以通过查询获取的数据结构。

// スキーマの定義
const typeDefs = gql`
  type User {
    name: String
    age: String
    gender: String
  }

  type Query {
    users: [User]
  }
`;

// データソース
const users = [
  {
    name: 'noguko',
    age: '28',
    gender: 'female'
  },
  {
    name: 'noguo',
    age: '30',
    gender: 'male'
  },
];

在上述的情况下，只是定义了架构和数据源，要实际操作数据需要创建解析器。↓

// リゾルバ関数を定義してクエリ実行時のデータ操作を行う
const resolvers = {
  Query: {
    users: () => users,
  },
};

通过从客户端执行查询，可以访问数据源。
GraphQL可以仅获取所需数据。
如果只需要name信息，只需从查询部分删除age和gender，则只会显示name的数据。

最后

通过实际运行GraphQL，我对以前对查询语言、模式语言和解析器的理解模糊的部分有了基本的理解，也在一定程度上取得了进展。
另外，我觉得只请求所需的数据非常方便。为了能够熟练掌握GraphQL技术，我打算继续进行输入和输出的循环。