使用Apollo库学习实现GraphQL Client的章节

2 年 ago
新, 韵
4 minutes

首先

这篇文章是参考@ruwatana先生的文章《使用Java×Spring Boot×Apollo实现GraphQL客户端》而创建的。

与@ruwatana的文章主要不同之处是

    • IntellJ IDEAを利用した実装を前提とする

 

    • Spring Bootを利用しない

 

    Kotlinで実装する

是的。

本文介绍了如何使用IntelliJ IDEA、Apollo库、Kotlin和gradle在Mac上开发GraphQL客户端环境的方法。

在本文中，我们将IntelliJ IDEA项目发布在https://github.com/kobunhada/GraphQLClientExample上。如果您愿意的话，请提供参考和任何不加掩饰的评论。

关于文章创作时的开发环境

本文所使用的开发环境如下所示。关于版本号，我想应该是截至2021年8月29日（可能）最新的。

環境Version備考OSmacOS11.5.2(Big Sur)
IDEIntelliJ IDEA2020.3.4gradle, KotlinSDK等は当IDEに依存IDE PluginJS GraphQL3.0.0IntelliJ IDEAでGraphQLファイルを扱うのに便利なPluginGraphQL ClientApollo Client2.3.5build.gradleに設定GraphQL Server環境構築Node.jsv16.8.0local環境にGraphQL Serverを構築する為に必要GraphQL Server環境構築yarn1.22.11同上Terminal任意のTerminalアプリ-

准备GraphQL服务器

由于本文旨在创建GraphQL客户端，因此GraphQL服务器将使用广为人知的“GraphQL Pokemon”，这对GraphQL学习者来说是有名的。

构建GraphQL 的服务器需要Node.js和yarn。关于构建的方法，推荐参考@thesugar的文章《Mac に Node.js 環境をさくっと整えるための最短ルート》。

完成Node.js和yarn的安装后，将GraphQL 克隆到任意目录下。

对GraphQL 进行克隆，并将其复制到本地。

您可以使用任何Git客户端应用程序（例如GitHub Desktop），将其克隆到任意目录中。

git clone git@github.com:lucasbento/graphql-pokemon.git

如果克隆无法成功（不清楚如何操作），请打开GraphQL 的网站，下载zip文件也是可以的。这种情况下，请解压缩下载的zip文件到任意目录。

graphql_pokemon.png

开启 GraphQL

在终端应用程序中运行。

1. 将克隆的GraphQL 目录移动到根目录中。

cd [あなたがClone(or zipファイルを展開したDirectory)]/graphql-pokemon

2. 使用GraphQL构建和启动Pokemon。

yarn
yarn run build-app
yarn start

一旦启动成功

GraphQL-Pokemon started on http://localhost:5000/

经过输出后，您将能够访问GraphQL 服务器。

成功了，如果访问 http://localhost:5000/ 并显示以下网站。

pokemon_server.png

关于GraphQL Pokemon服务器

在画面的左侧编写并执行Graph QL的查询（点击圆圈中的三角箭头按钮），执行结果将会在右侧输出。

executequery.png

此外，该网站右上角有一个“DOCs”按钮，您可以从这里查看GraphQL 的模式。

expanddocs.png

引入JS GraphQL插件

这是一个在使用IntelliJ IDEA处理GraphQL文件时非常方便的插件。同时，本文将在假定已安装此插件的前提下进行说明。
安装方法与其他插件相同。

安装JS GraphQL

请从菜单中选择“偏好设置”。

jsgraphql.png

请点击左侧的插件，然后选择右上角的市场。在市场中搜索GraphQL等关键词，并安装JS GraphQL插件。

jsgraphql2.png
jsgraphql3.png

创建新项目

请使用以下设置，在IntelliJ IDEA中创建一个新项目。

    • 言語: Kotlin/JVM

 

    Build Tool: Gradle

项目成果示例

newproject2.png

请在创建项目后打开build.gradle文件。

openbuildgradle.png

引入Apollo库

Applo库是一个GraphQL的客户端库。

    • 以下pluginをbuild.gradleのpluginsに追加して下さい。

‘com.apollographql.apollo’ version ‘2.5.3’

plugins {
    id 'java'
    id 'org.jetbrains.kotlin.jvm' version '1.5.30'
    id 'com.apollographql.apollo' version '2.5.3'
}
    • 以下、3つのライブラリをbuild.gradleのdependenciesに追加して下さい。

com.apollographql.apollo:apollo-runtime:2.5.3
com.apollographql.apollo:apollo-coroutines-support:2.5.3″
com.apollographql.apollo:apollo-rx3-support:2.5.3

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib"
    testImplementation 'org.junit.jupiter:junit-jupiter-api:5.6.0'
    testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine'
    //Apollo client library for read GraphQL web server
    implementation("com.apollographql.apollo:apollo-runtime:2.5.3")
    implementation("com.apollographql.apollo:apollo-coroutines-support:2.5.3")
    implementation("com.apollographql.apollo:apollo-rx3-support:2.5.3")
}

请在追加后，确保不要忘记执行gradle的同步。

添加GraphQL的各种文件

要从GraphQL服务器获取数据

    • Schama定義ファイル

 

    GraphQL Queryファイル

需要。

添加GraphQL的Schema定义文件

我认为在以后的终端上，通过IntelliJ IDEA的终端进行操作可能会更方便。以下是有关IntelliJ终端显示方式的说明。

显示IntelliJ的终端

terminal.png

2. 在Schama中定义的文件输出目录创建到项目中。

在项目/src/main/目录下，使用任意名称创建一个目录。

mkdir -p src/main/graphql/graphqlpokemon

生成schema.json文件（即输出Schema定义文件）。

指定前准备好的GraphQL Server的终端点并生成schema.json。

./gradlew downloadApolloSchema \
  --endpoint="http://localhost:5000/graphql/endpoint" \
  --schema="src/main/graphql/graphqlpokemon/schema.json"

BUILD SUCCESSFUL in 584ms
1 actionable task: 1 executed

如果构建失败，请重新检查build.gradle的设置。

添加一个GraphQL查询

接下来，我们将添加一个查询。

创建查询文件

graphqlquery1.png
graphqlquery2.png

实现查询功能。

最好先访问 http://localhost:5000/ ，确保查询功能正常运行，然后再进行实现，这样可能会更加轻松。

query Example {
    pokemons(first: 10) {
        number,
        name,
        maxHP,
        maxHP,
        image
    }
}

3. 重建

重新构建，Apollo库可以生成2中新增的查询模型类（graphqlpokemon.ExampleQuery）。

rebuild.png

客户端应用的实现

请将以下内容进行实施。

    • graphqlpokemon.Example・・・GraphQLからデータを取得する為のクラス

 

    graphqlpokemon.Main・・・mainメソッド。Example.get()メソッドをcallして、dataを標準出力する

package graphqlpokemon

import com.apollographql.apollo.ApolloClient
import com.apollographql.apollo.coroutines.await
import java.lang.Exception

class Example {
    suspend fun get(): MutableIterator<ExampleQuery.Pokemon>? {
        val apolloClient = ApolloClient.builder()
            .serverUrl("http://localhost:5000/graphql/endpoint")
            .build()
        val query = ExampleQuery.builder().build()
        val result: MutableIterator<ExampleQuery.Pokemon>? = try {
            apolloClient.query(query).await().data?.pokemons?.iterator()
        } catch (e: Exception) {
            null
        }

        return result

    }
}



package graphqlpokemon

import kotlinx.coroutines.*
import kotlin.jvm.JvmStatic
import kotlin.system.exitProcess

object Main {
    private var isExit = false
    @JvmStatic
    fun main(args: Array<String>) {
        GlobalScope.launch {
            val pokemons = Example().get()
            if (pokemons == null) {
                println("no pokemon")
                isExit = true
            } else {
                pokemons.forEach { pokemon ->
                    delay(100)
                    println(
                        "number:%s, name:%s, hp:%s, cp:%s, image url:%s".format(
                            pokemon.number,
                            pokemon.name,
                            pokemon.maxHP,
                            pokemon.maxCP,
                            pokemon.image
                        )
                    );
                }
                isExit = true
            }
        }
        while (true) {
            Thread.sleep(100)
            if (isExit) exitProcess(0)
        }
    }
}

如果成功，将会输出如下：

number:001, name:Bulbasaur, hp:1071, cp:951, image url:https://img.pokemondb.net/artwork/bulbasaur.jpg
number:002, name:Ivysaur, hp:1632, cp:1483, image url:https://img.pokemondb.net/artwork/ivysaur.jpg
number:003, name:Venusaur, hp:2580, cp:2392, image url:https://img.pokemondb.net/artwork/venusaur.jpg
number:004, name:Charmander, hp:955, cp:841, image url:https://img.pokemondb.net/artwork/charmander.jpg
number:005, name:Charmeleon, hp:1557, cp:1411, image url:https://img.pokemondb.net/artwork/charmeleon.jpg
number:006, name:Charizard, hp:2602, cp:2413, image url:https://img.pokemondb.net/artwork/charizard.jpg
number:007, name:Squirtle, hp:1008, cp:891, image url:https://img.pokemondb.net/artwork/squirtle.jpg
number:008, name:Wartortle, hp:1582, cp:1435, image url:https://img.pokemondb.net/artwork/wartortle.jpg
number:009, name:Blastoise, hp:2542, cp:2355, image url:https://img.pokemondb.net/artwork/blastoise.jpg
number:010, name:Caterpie, hp:443, cp:367, image url:https://img.pokemondb.net/artwork/caterpie.jpg

Process finished with exit code 0

最后

我之前对GraphQL和Kotlin都没有经验，而且已经有很久没有用过（事实上，编码本身已经差不多半年没有碰了），所以我的内容可能有些拙劣。但如果对某人有所帮助就让我感到幸福。

请参阅

    • Java × Spring Boot × Apollo で GraphQL クライアントを実装する

 

    • Mac に Node.js 環境をさくっと整えるための最短ルート

 

    GraphQL
✖
广告
将在 10 秒后关闭
bannerAds