💨

GraphQLとクエリアで管理画面をローコードで10分で開発する

aktky

2023/10/19に公開

今回の対象読者

GraphQLを利用してサービスを作っている際、CRUD操作を行う管理画面の開発に苦労した経験はありませんか？

今回は、 とにかく早く、GraphQLと連携して管理画面を作りたい方に向けて、ローコードツールの『Querier（クエリア）』を使って、10分で管理画面を構築する方法を紹介していきます。

今回作る管理画面

今回は、以下の要件を満たす管理画面を作ってみます。

GraphQL APIからアニメ作品データを取得し、テーブルに表示する
テーブルで選択されたアニメ作品に対して、コメントを追加する

クエリアとは

クエリアは様々なデータベースやAPIと連携し、社内向けの管理画面やツールをローコードで構築できるサービスです。

https://www.querier.io

実際に管理画面を構築する前に、クエリアの編集画面の構成を解説します。

大き分けて、 データフロー というロジックを記述する部分と、 コンポーネント というUIに関わる部分に分かれています。

右ナビゲーションのコンポーネント一覧から、中央のキャンバスにドラッグ・アンド・ドロップでコンポーネントを配置し、左ナビゲーションで各データソースに対するリクエストやロジックを記述していきます。

3分で分かるクエリアの紹介動画もあるので、ご興味ある方はぜひ見てみてください。

クエリアとGraphQLを連携する

早速、クエリアとGraphQL APIを連携する設定をしていきます。

クエリアに移動し、左の [データ連携] タブから、データ連携の設定ページに行く
[新規作成] > [GraphQL] と選択する
すでに開発してあるAdmin向けAPIの [Base URL] を入力する
[認証方法] で Bearer を選択し、[Bearerトークン] にトークン情報を入力して、保存する

これで、クエリアとGraphQLを連携する初期設定は完了です。

詳細な接続方法はこちらの公式ドキュメントをご覧ください。

新しいページを作成する

データ連携が完了したら、新しいページを作成します。
プロダクトトップ右上の、 [新規作成] > [ページを作成] から、新しいページを作成します。

クエリアでは、フォルダとページという概念があり、ページをフォルダリングして、階層構造で管理できるので、ページが増えてきても管理が煩雑になることはありません。

作品一覧をテーブルに表示する

以下の手順でGraphQL APIからAnnictの作品を取得し、テーブルに表示していきます。

GraphQL APIからデータを取得するデータフローを作成する

作成したページの [ページを編集] から編集画面に行く

左ナビゲーションの　[新規作成] から、データフローを作成しする
[アクションを選択] パネルで、先程連携したGraphQL APIを選択する
[Query] に、以下のクエリを入力する

query($seasons: [String!], $first: Int) {
  searchWorks(seasons: $seasons, first: $first) {
    edges {
      node {
        annictId
        title
        watchersCount
        image {
          recommendedImageUrl
        }
      }
    }
  }
}

[Variables] に以下を入力する

{
  "seasons": ["2018-autumn"],
  "first":   100
}

※便宜上JSONで記述しています
6. [アクションをテスト] ボタンを押し、正しくデータが取得できているか確認する

[+] から新しいアクションを追加し、JavaScript を選択する

取得したデータをテーブルに参照する形(Objectの配列形式)に変形するコードを記述する

// action1でGraphQLから取得した値は、 {{ action1.data }} で取得可能。
return {{ action1.data.searchWorks.edges }}.map(d => {
  let imageUrl = ''
  
  if (d.node.image) {
    imageUrl = d.node.image.recommendedImageUrl
  }
  
  return {
    "annictId": d.node.annictId,
    "title": d.node.title,
    "watchersCount": d.node.watchersCount,
    "image": imageUrl
  }
})

[アクションをテスト] ボタンを押し、意図した形にデータが変形されているか確認する

テーブルを配置し、データフローと紐付ける

右ナビゲーションの [テーブル] を中央にドラッグ・アンド・ドロップする

右ナビゲーションの [データ] に {{ dataflow1.data }} と入力する

右ナビゲーションの [カラム] の設定から、カラム名を変更する
右ナビゲーションの [カラム] の設定から、カラムタイプを変更する（タイプを Image などにすると自動で画像表示になったりします）

コメントの追加機能を実装する

今回は、作品を選択して、コメントを作成する例を紹介します。

フォーム系コンポーネントを配置する

右ナビゲーションの [テキストエリア] を中央にドラッグ・アンド・ドロップする
右ナビゲーションの [ラベル] に コメント と入力する
右ナビゲーションの [ボタン] を中央にドラッグ・アンド・ドロップする
右ナビゲーションの [ラベル] に 追加する と入力する

GraphQL APIでデータを追加するデータフローを作成する

作成したページの [編集する] から編集画面に行く
左ナビゲーションの　[新規作成] から、データフローを作成しする
[アクションを選択] パネルで、先程連携したGraphQL APIを選択する
[Query] に、以下のクエリを入力する

mutation($input: CreateRecordInput!) {
  createRecord(input: $input) {
    clientMutationId
  }
}

[Variables] に以下を入力する

{
  "input": {
    "episodeId": {{ table1.selectedRow.data.annictId }},
    "comment":   {{ textarea1.value }}
  }
}

※便宜上JSONで記述しています
※クエリアでは、{{ }} という記法を使って、コンポーネントの値を参照することができます。

ボタンとデータフローを紐付ける

ボタンを押下したら、上で作成したデータフローが実行されるようにしたいので、以下の手順で設定していきます。

配置した [ボタン] を選択する
右ナビゲーションの [イベントを追加する] をクリックする
[実行するアクション] を データフローの実行 にする
[データフロー] で、先程作成した dataflow2 を選択する

コメントを作成した後にテーブルをリフレッシュする

[dataflow2] を選択する
[成功時に実行するアクション] から [イベントを追加] をクリック
[実行するアクション] を データフローの実行 にする
[データフロー] で、作品データの取得をする dataflow1 を選択する

これで、コメントの追加が成功したら、再度作品一覧を取得し直す設定が完了しました。
同じような要領で更新や削除、ファイルのアップロードなども行えるので、基本的な管理画面の要件は満たす十分な機能を備えています！

権限管理

権限管理をツール側に移譲できるのは、ローコードツールを利用する大きなメリットの一つです。
クエリアでは、様々な権限管理をGUIで操作するだけで完結します。

クエリアでは、各ページに対して、メンバーごとに、「フルアクセス」、「閲覧のみ」、「アクセス不可」の権限を割り振ることができます。

その他にも様々な権限管理をすることができますので、詳しくは公式ドキュメントをご参照ください。

ローコードであれば、管理画面開発がエンジニア1人で完結する

今回は、ローコードツールとGraphQL APIを使って管理画面を構築していきました。
管理画面の開発は、常にエンジニアのリソースを圧迫し、悩みの種の一つになっていると思います。

ローコードツールを使えば、ツールが提供する整ったUIコンポーネントをドラッグ・アンド・ドロップで配置するだけなので、UIに関して考えることは一切ありません。

APIのスキーマを一番理解しているバックエンドエンジニア一人で管理画面の開発が完結します。

これにより、手を動かす時間はもちろん、デザインバグやAPIのデータ設計のやり取りなどの時間を削減でき、大幅に管理画面開発全体の工数を削減することができます。

このように、管理画面をローコードで開発する方法は、エンジニアのリソースを削減する有力な手段です。特にスタートアップや時間とリソースに制限があるプロジェクトにおいて、このアプローチは非常に有用です。

ぜひ一度試して、その効果を実感してください。