見出し画像

【Hasura】-GraphQLを操作する-

CREFIL



はじめに

こんにちは。CREFL株式会社の甲斐です。今日は、スピーディな開発を可能にすると言われている「Hasura」の GraphQL についてご紹介したいと思います。

Hasura、GraphQLとは

HasuraとはHasura社のミドルウェアで、裏側にはDBが存在しています。
提供しているGraphQL APIにて、クライアントとDB間でSQLとの相互交換を行います。GraphQLはHTTPエンドポイントにクエリをPOSTしてAPIを呼び出し、バックエンドAPIから必要な分のデータの取得を行います。

Hasuraのコンソール上でDBに定義されたテーブルはGraphQLスキーマに変換され、GraphQL APIで使用できるようになります。

GraphQLのメリット

GrapheQLには開発を行う上で以下のようなメリットがあります。

  • 必要な分だけのデータ取得・・・必要なフィールドを指定するので過剰取得を回避します。

  • APIの呼び出し頻度を抑制

  • APIの作業を独立できる・・・スピーディな開発を実現。

RESTとGraphQLの類似コード比較

  • データオブジェクトの取得

    • REST → GET

    • GraphQL → query

  • データ挿入

    • REST → POST

    • GraphQL → mutation

  • データ更新/削除

    • REST → PUT/PATCH/DELETE

    • GraphQL → mutation

  • データの監視/サブスクリプション

    • GraphQL → subscription

GraphQLの使い方

ここでは、3つの基本的な GraphQLの仕様について Hasura コンソール上での 挙動をもとに説明します。
※サンプルのテーブルとしてHasura導入時のデフォルト「order」「customer」テーブルを使います。

1. データ取得 - Queries

左下で「Add New Query」として、「＋」ボタンをクリックすると新しい query が作成されます。①取得したいものを ②where の中などで選択して、（今回の場合は order テーブルの中のもの）③実行ボタンをクリックすると、④右側の 「data」の中に実行結果が入った状態で表示されます。

order テーブル から取得したい情報を指定します

上記を実行した結果、下記のようなquery が作成されます。

query MyQuery {
  order {
    id
    order_date
    customer {
      first_name
    }
    product
  }
}

2. データの書き込み - Mutations

①左下で「Add New Mutation」として、「＋」ボタンをクリックすると②に新しく Mutation が作成されます。

【新規 customer を insert 】

「Mutation」を選択し、「＋」ボタンを押すと新規の mutation が作られます

③Mutationの中に挿入したい情報を添付画像のように設定し（idが『13』で名前が『Jiro』の customer情報/ ※ idがオートインクリメントでない場合）、④実行すると⑤結果が表示されます。

実行結果では指定した内容の確認ができます

上記を実行した結果、下記のようなquery が作成されます。
※ customer.id がオートインクリメントではなく NOT NULL対象の場合の例

mutation MyMutation {
  insert_customer(objects: {id: 13, first_name: "Jiro"}) {
    returning {
      id
      first_name
    }
    affected_rows
  }
}

Hasura コンソールのヘッダーメニュー「DATA」から DB内の customer テーブルを確認してみます。

DBにも追加されています

【既存 customer を update】
先程作ったcustomer情報にメールアドレスを登録する場合
左下で「Add New Mutation」として、「＋」ボタンをクリックし新しく Mutation が作成されたら、where の内容と_set の内容を左の「update_customer」から選択・設定を行い、実行します。

UPDATEする時のmutationの内容と実行結果

上記を実行した結果、下記のようなquery が作成されます。

mutation MyMutation {
  update_customer(where: {id: {_eq: 13}}, _set: {email: "jiro@example.com"}) {
    affected_rows
    returning {
      id
      first_name
      email
    }
  }
}
customer テーブルでも確認できます

3. データの監視 - Subscriptions

この機能では、サーバーがプッシュしたデータを取得し、リアルタイムやリアクティブな機能を簡単に追加できるようになります。
例えば、①左下で「Add New Subscription」を選択し「＋」ボタンで、②のような Subscription を作成し、③実行します。

実行すると、実行ボタンが「■」になっているのを確認できます。
ユーザーのセットが変更になると、自動で右側の実行結果に反映されます。

今回は GraphQLの 「query」、「mutation」、「subscription」と、基本的な見方についてご紹介しました。Hasura の GraphQL に触る際の参考になれば幸いです。