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

HasuraはHasura GraphQLエンジンというのを使用し、データベース、RESTサーバー、GraphQLサーバー、およびサードパーティAPIに接続して、すべてのデータソースにわたって統合されたリアルタイムGraphQLAPIを提供してくれる便利なソリューションです。 即座にデータにアクセスできるため、アプリやAPIを迅速にデプロイできるというメリットがあります。

bubbleはノーコードでアプリケーションを構築するサービスですが、データへのアクセスはbubble内部のもの、プラグインを使って外部のデータを扱うといったことが可能です。

ふとbubbleのアプリからHasuraに接続してデータを取得してみようと思ったので試していきます。

やろう

hasuraはRESTのエンドポイントを作成できるので、bubbleからはAPI Connectorプラグインを使って接続できます。

• bubbleのアプリ
• hasuraのプロジェクト
• hasuraに接続できるデータベース

を用意しておきます.

hasuraとデータベースは事前に接続を作成しておきます。

hasuraでRESTエンドポイントを作成

接続したデータベースから情報を取得したいので、クエリでデータの取得ができることを確認した後エンドポイントを作ります

使用するデータ

memoというテーブルに上記のようなサンプルデータを挿入しています

GraphiQLでデータ確認

クエリを描いてデータが取得できるか確認します

hasuraのプロジェクトページのAPI->GraphiQLタブをクリックし、エディタにクエリを記述します。

エディタにある再生ボタンを押して結果が返って来ればOKです。

RESTエンドポイント

GraphiQLエディタでクエリを実行して結果を確認できたら、エディタ上にあるRESTをクリックします。

• Name
  • エンドポイント名を入力
• Location
  • https://<<プロジェクト名>>.hasura.app/api/rest/　に続くURLパスの値を入力
• Methods
  • アクセスできるhttpメソッドを選択

入力後、createボタンを押して作成完了です。

実際にアクセスしてみてデータが取得できるかも確認しておきます。

curlでの例:

curl -H "x-hasura-admin-secret:<<HASURA_GRAPHQL_ADMIN_SECRETの値>>" https://<<プロジェクト名>>.hasura.app/api/rest/memo

bubbleでAPI Connectorの設定

API ConnectorにhasuraのRESTエンドポイントを接続する設定を行います。

PluginsページでAPI Connectorをクリックし、Add another APIボタンを押して設定画面にいきましょう。

• API Name
  • このAPI接続の名前をつけます
• Authentication
  • Private key in header　を選択します
• Key name
  • x-hasura-admin-secret
• Key value
  • hasuraプロジェクトの環境変数HASURA_GRAPHQL_ADMIN_SECRET に設定されている値を入力します

今回はx-hasura-admin-secretをheaderにつけてhasuraのAPIを実行する方法で行うので、上記の設定にしてみました。

※ ベストプラクティスは、保護するためにユーザー認証フローを組み込むこと とされています。

基本設定を入力し終えた後、ここのAPI Callの設定に移ります。 expandボタンの後ろに隠されています

• Name
  • 呼び出し名をつけます
• Use as
  • Data か Actionを用途に応じて選択します
• Data type
  • APIの返却タイプに応じてリストにあるものを選択します

上記を決めた後、通信方式とAPIエンドポイントのURLを入力しましょう。

Initialize Call ボタンを押して初期呼び出しを行います。

初期呼び出しが成功すると、サーバーからの応答タイプをマッピングできる画面が表示されるので設定しておきましょう。

これでbubbleのアプリからhasuraのRESTエンドポイントを使う設定は終わりです。

bubbleでアプリを構築

では実際にbubbleのアプリをデザインし、hasuraからのデータを表示させてみます。

表示領域の配置と設定

今回設定したAPIは複数のデータを返すので、Repeating groupを配置します。

プロパティを開いて、Type of contentを選択します。

ここに選択するものは、API CallのInitialize Call を行ったときに表示されたものになります。

今回の例だと、getMemo memo を選択します。

Data sourceにはGet data from an external APIを選択します。

API providerは作成したAPI接続を選択します。

これでRepeating groupにデータを読み込めるようになりました。

取得したデータを表示させる設定

Repeating groupでデータを読み込めるようになったので(List)、今度は個別の情報を表示させる要素を配置します。

表示させるだけなので、Text要素をRepeating groupに配置します。

...edit me... と表示されているテキストボックスをクリックすると、insert dynamic data というリンクが現れるのでこれをクリックします。

Current cell's getMemo memo という選択肢が現れるので、これを選択します。

Current cell's ~~~~ はRepeating groupに読み込んだデータのことです。

API call でマッピングした要素を選べるので、表示させるものを選択します。

表示の確認する

設定が終わったら、Previewで確認しておきましょう。

データを追加したり削除したりして色々試してみてください。

Closing

bubbleからhasuraのRESTエンドポイントを接続してデータを取得してみました。

hasuraは比較的簡単にデータを統合し、APIを通して外部からのアクセスもでき、bubbleはこういったAPIとの接続を容易に行えるので相性は良いのではないでしょうか。