.../articles/

GraphQL Playground Desktop を使ってみた

今回は Playgorund で GraphQL を叩いてみるだけの超初学者向けの記事です。

インストール

GitHubからダウンロードするか、brew cask でインストールできるので、好きな方法でイントールします。

GitHub
https://github.com/prisma-labs/graphql-playground/releases

# brew caks のインストールコマンド
brew cask install graphql-playground

エンドポイントを選ぶ

起動すると、エンドポイントの選択画面がでてきます。今回は EXAMPLES にある Pokemon に接続してみます。

このポケモンサーバーのようにすぐ試せるGraphQLサーバーがまとめてあったので載せておきます。

Public GraphQL APIs
http://apis.guru/graphql-apis/

Schemaを確認してQueryを実行する

右端のSCHEMAを押して、GraphQLのスキーマを確認します。

type Attack {
  name: String
  type: String
  damage: Int
}

type Pokemon {
  id: ID!
  number: String
  name: String
  weight: PokemonDimension
  height: PokemonDimension
  classification: String
  types: [String]
  resistant: [String]
  attacks: PokemonAttack
  weaknesses: [String]
  fleeRate: Float
  maxCP: Int
  evolutions: [Pokemon]
  evolutionRequirements: PokemonEvolutionRequirement
  maxHP: Int
  image: String
}

type PokemonAttack {
  fast: [Attack]
  special: [Attack]
}

type PokemonDimension {
  minimum: String
  maximum: String
}

type PokemonEvolutionRequirement {
  amount: Int
  name: String
}

type Query {
  query: Query
  pokemons(first: Int!): [Pokemon]
  pokemon(id: String, name: String): Pokemon
}

スキーマを見ると pokemon と pokemons の2つの Query が確認できます。 今回は、 pokemonクエリ を叩きます。 pokemonクエリは引数に id か name を指定する必要があり、 idはポケモンとは関係の無い値が入っているため name に Growlithe を指定します。

query{
  # 引数に "Growlithe" を指定
  pokemon(name:"Growlithe"){
    # 欲しいデータを列挙していく
    id
    name
    image
    # 入れ子の場合も、戻り値の型をみて欲しいデータを列挙していく
    attacks{
      fast{
        name
        type
        damage
      }
      special{
        name
        type
        damage
      }
    }
    evolutions{
      id
      name
      image
    }
  }
}

正常に処理されるとこんな感じでデータが返ってきます。

{
  "data": {
    "pokemon": {
      "id": "UG9rZW1vbjowNTg=",
      "name": "Growlithe",
      "image": "https://img.pokemondb.net/artwork/growlithe.jpg",
      "attacks": {
        "fast": [
          {
            "name": "Bite",
            "type": "Dark",
            "damage": 6
          },
          {
            "name": "Ember",
            "type": "Fire",
            "damage": 10
          }
        ],
        "special": [
          {
            "name": "Body Slam",
            "type": "Normal",
            "damage": 40
          },
          {
            "name": "Flame Wheel",
            "type": "Fire",
            "damage": 40
          },
          {
            "name": "Flamethrower",
            "type": "Fire",
            "damage": 55
          }
        ]
      },
      "evolutions": [
        {
          "id": "UG9rZW1vbjowNTk=",
          "name": "Arcanine",
          "image": "https://img.pokemondb.net/artwork/arcanine.jpg"
        }
      ]
    }
  }
}

弊社のqropではGraphQLを採用していてプロジェクトにジョインした段階で、 docker-compose up で localhost にPlayGround が立ち上がるすばらしい環境が既にありましたが、こういった最小構成で試すと基本がわかりやすいと思いました。おわり。

.../articles/

Articles

記事

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

FastAPIのスキーマクラスをOpenAPIから生成する方法

FastAPIのスキーマクラスをOpenAPIから生成する方法

PythonでAPIを構築する要件があり、フレームワークに比較的モダンなFastAPIを採用しました。FastAPIはバックエンドの開発を行えば自動でOepnApi定義を生成する機能が備わっていますが、今回はこれを使わず、事前に用意したOepnApi定義からFastAPIで利用するスキーマクラスを生成する方法を紹介します。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

GiFT1号目新卒デザイナーの2021年振り返り

GiFT1号目新卒デザイナーの2021年振り返り

いつの間に、年末ですね。入社してもう、9ヶ月も立っていたようです。2021年の振り返りを記事にしました。

TimesclaeDBのデータ圧縮に関して

TimesclaeDBのデータ圧縮に関して

TimescaleDBはデータベース内の一部のテーブルを時系列データとして扱えるPostgreSQLの拡張です。PostgreSQLの機能拡張なので非常に手軽に導入できます。今回はこのTimesaceDBの圧縮について調べたので備忘録として書き綴りました。

すべての記事

お問い合わせ