bubbleのアプリにHasura Cloudを接続してGraphQLでデータを追加してみる

2021.10.25

以前の記事ではHasura Cloudを接続してbubble上でデータの表示を行いました。

今回はデータを追加してみたいと思います。

GraphQLではデータの作成や更新・削除などの処理はMutationと呼ばれる形で定義されます

やってみる

シンプルに入力フォームを用意し、入力された値を保存できるようにしてみます。

HasuraでMutationを定義

Hasuraプロジェクトにログインし、APIタブをクリックし、エディタに記述します。

mutation insertMemo {
  insert_memo(
    objects: [
      {
        content: "Something happened in HP",
      }
    ]
  ) {
    returning {
      id
      content
    }
  }
}

contentというフィールドにデータを追加する例です。

実行して追加されると、returningを定義していたので、idとcontentが結果として返ってきていることがわかります。

ただし今回は

入力された値を追加したいので、Mutationのobjectsに定義する値は動的です。

mutation insertMemo($insert_content: String) {
  insert_memo_one(
    object: {
        content: $insert_content
    }
  ) {
    id
    content
  }
}

上記のように変数を使用して定義することが可能です。

hasuraのエディタにクエリ変数を指定できる箇所があるため、そこにjson形式で入力して動作確認が可能です。

クエリ変数例

{
  "insert_content": "【マッチハイライト公開】明治安田生命J1リーグ第33節"
}

HasuraにREST APIを作成

bubbleからはAPI Connectorを使ってREST APIにアクセスできるので、hasuraの方でもRESTを作成します。

前回の記事と同じように作成しましょう。

POSTリクエストのみを許可したREST APIを作成しました。

bubbleに入力フォームを追加

bubbleアプリのDesignタブをクリックし、Group要素を追加し、その中にInput要素とButton要素を追加します。

Input要素に入力された内容を保存するため、workflowでHasuraに保存できるようにしていきます

API Connector pluginにAPIを追加

API Connectorに先ほど作成したHasuraのREST APIに接続する設定を追加します。

APIの追加は前回の記事を参照してください。

workflow内で使用するため、Use asActionにすることが重要です。

パラメーターには、先ほど設定したクエリ変数 と同じkeyを使います。

{"insert_content": "<content>"}

Privateのチェックは外しておきます (dynamic dataを使うため)

設定したら、initialize call を押して以下のような画面になれば設定はOKです。

Saveを押して完了です。

workflowの作成

このworkflowからhasuraに作成したREST APIにアクセスしてデータを追加します。

まずはDesign画面で、入力フォームのGroupのType of content を API Connectorで追加したAPI名に設定します。

その後、送信ボタンのworkflowを追加していきます。

actionの追加で、Pluginを選択すると、API Connectorで追加したAPIが表示されるので、それを選択します。

content に Designで追加したmemoのテキスト要素の値をdynamic dataとして設定します。

確認

プレビュー画面で動作を確認します。

何か入力して送信ボタンを押すと、

ページリダイレクトされました。データを見ると、先ほど入力したものが表示されていました。

hasuraの方でデータを確認したところ、ちゃんと追加されています。

最後に

bubbleからHasuraで作成したREST APIを呼び出してデータを追加してみました。

比較的単純なデータ追加だけ行いましたが、特別難しいことはなくできます。

実際のサービスだとデータ追加の時になんらかの処理を挟むことが多いと思います(hasuraでいうビジネスロジックの挿入のこと)。

この辺りは次回以降の記事で試してみようと思います。