有一个对GraphQL一无所知的人,在两周内经历了GraphQL服务器的开发,我将总结一下

关于这篇文章

这是我在Qiita的首次投稿。
作为一名日常从事Web工程师工作的作者,在工作中使用Ktor来实现GraphQL服务器的搭建,我总结了这一经验。
希望那些对GraphQL不太了解的人能大致掌握它的概要,这样就感到非常幸甚。

如果有需要的话,我会另外写一篇文章,来解释实现的部分。

关于GraphQL

简单说就是类似于REST的API规范。
它使用像SQL这样的查询语言与服务器进行交互。
据说是由Facebook公司开发的,目前已开源。可以在官方网站找到更多信息。

在这一点上,REST与其他方面有很大的不同。

    • 一度の通信で複数のデータの必要なプロパティだけ取得できる。

 

    エンドポイントは基本的に一つだけ。

简单的机制

スクリーンショット 2019-02-13 23.50.43.png

客户端:通过GraphQL查询来指定处理和响应的数据,并向服务器发送请求。

GraphQL服务器:解析查询并执行指定的处理后,将指定的数据作为响应返回。

查询和突变

在GraphQL中有两种操作类型。

查询 → 无副作用的东西
变异 → 有副作用的东西

与REST相比,情况如下。

GraphQLRESTQueryGETMutationPOST, PUT, DELETE

作为HTTP通信的请求

在实际发送HTTP请求时,会使用POST进行通信。要作为参数的JSON数据将采用以下格式。

{
    “query” : “ ${GraphQLのクエリを書く} ”,
    “operationName” : “${実行するオペレーションをする}”,
    “variables” : “${クエリ内で使った変数の中身をJsonで定義する}”
}

关于语法

使用GraphQL进行通信时,服务器端定义了一个模式,客户端按照该模式发出查询。
在这里,我们简要介绍了其语法。
如果你想了解更多详细信息,请参考官方文档或其他文章。
这篇文章对我来说非常有帮助 → https://qiita.com/syu_chan_1005/items/3350f1d12c17a77e98c7

模式

这是在服务器端定义的。

    • どんなデータ構造なのか?

 

    どんなデータ処理なのか?

定义以下两点。
实际实现会依赖各个库,但将这些定义记录在名为 “.graph” 的文件中。

数据结构

据说数据的结构被定义为类型。
原始类型一共有五种。

    • ID

 

    • Boolean

 

    • String

 

    • Int

 

    Float

根据这些进行数据类型的定义。
此外,在GraphQL中也区分可为空。

Int! → null だと NG

Int → null でも OK

以下是示例。

# type → オリジナルの型の定義
type User {
    id: ID
    name: String
    email: String
    age: Int
}


# input型 → 操作の引数として使われる型
input UserInput {
    name: String! # null は NG
    email: String # null は OK
    age: Int!     # null は NG
}

这真的很容易理解对吧

似乎有许多种类型,如枚举等,还有其他各种不同的东西。

数据处理

一旦定义了类型,就需要定义使用这些类型进行哪些操作。

# Queryとして操作できる
# IDを指定することでUser型のデータを取得できる。
type Query {
    getUser(id: ID): User
}

# Mutationとして操作できる
# UserInput型のデータを入れるとcreateUserができて、Booleanが返ってくる
type Mutation {
    createUser(user: UserInput!): Boolean
}

查询(Query)和突变(Mutation)似乎可以分别定义为类型(type)。

请以中文本地方式将以下句子改述一次:

查询

在客户端发出的查询。
基于服务器端已经定义的模式,客户端发出查询以获取所需的数据。
需要分别定义Query和Mutation。

询问

对于Query的定义

# User.id が 1 のデータの name と age を取得する
query {
    getUser(id: “1”) {
        name
        age
    }
}

突变

突变的定义

mutation create($inputUser: User!) {
    createUser(user: $inputUser)
}

使用于Mutation的变量(通过Json进行定义)

{
    “inputUser” : {
        “name” : "ほげ太郎”
        “email”: “sample@qiita.com”
        “age”: “3”
    }
}

我想试一试

GitHub的V4版本API可以使用GraphQL进行查询。您可以在浏览器上尝试一下。

当您访问时,会跳转到如下页面。

スクリーンショット 2019-02-06 22.08.00.png

当您在左上角的文本框中编写并执行查询时,右侧将显示响应的 JSON 数据。
(您可以确认数据以正确的格式返回)

你可以在最右边的位置确认模式的定义。

如果在使用操作(如Mutation)时需要使用变量,请在左下方的QUERY VARIABLES中以Json形式进行记录。
※即使不使用Variables,也需要输入空的Json数据,否则可能会出现错误。

如果要实际进行开发,建议使用名为GraphiQL的工具。

总结起来

非常感谢您从头到尾阅读了我拙劣的文章。
若能对您稍有裨益,我将感到万分荣幸。

广告
将在 10 秒后关闭
bannerAds