Hexabase TypeScript SDKを使ってデータストアからデータの詳細を取得する

Hexabase（ヘキサベース）は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、データストアからのデータ取得方法を紹介します。以前にデータを一覧取得する方法は解説しましたが、今回は1件のデータ詳細を取得する方法になります。

インストール

インストールはnpmやyarnを使って行います。

# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js

インポート

インポートすると、 HexabaseClient というオブジェクトが取得できます。

import { HexabaseClient } from "@hexabase/hexabase-js";

初期化

HexabaseClientを初期化します。

const client = new HexabaseClient();

認証

Hexabaseでは業務利用を想定しているため、利用する際に認証情報が必須になります。最初はメールアドレスとパスワードで認証し、その後はトークンを使ってGraphQLにアクセスします。 client を使って処理します。

初回の認証は次のようになります。emailとパスワード、またはトークンが必須です。

client.login({email, password, token});

後はこの client に対して処理を行います。

データストアへのアクセス時に必要な情報について

データストアへアクセスする際には以下の情報が必要です。

• データストアID datastoreId
• （オプション） プロジェクトID projectId

さらにデータ取得を行う際の情報（ページ数、取得件数など） params が指定できます。以下がアクセス例です。

const project = client.currentWorkspace.project(projectId);
const datastore = project.datastore(datastoreId);
const items = await datastore.items();

そして、詳細情報を取得します。

await items[0].getDetail();

結果

items[0]　は次のようになります。

パラメータ名	型	意味
title	文字列	タイトル
rev_no	数値	リビジョン番号
statuses	ItemStatus[]	ステータスのリスト
actions	ItemAction[]	アイテムのアクション
statusActions	StatusAction[]	ステータスのアクション
statusOrder	JSON	ステータスの並び順
statusActionOrder	JSON	ステータスのアクション並び順
itemActionOrder	JSON	アイテムのアクション並び順

statuses

statusesは次のようなプロパティを持ったItemStatusのリストが入ってきます。

• id
• displayId
• name

actions

actionsは次のようなプロパティを持ったItemActionのリストが入ってきます。

• id
• displayId
• name
• displayOrder
• crudType

statusActions

statusActionsは次のようなプロパティを持ったStatusActionのリストが入ってきます。

• id
• displayId
• name
• displayOrder
• crudType
• nextStatusId
• item

status_order/status_action_order/item_action_order

*_orderは各ステータスやアクションの並び順を指定するIDが配列になっています。

"status_order": [
	"62d795e20ffce53a09e2a055",
	"62d795e20ffce53a09e2a054",
	"62d795e20ffce53a09e2a057",
	"62d795e20ffce53a09e2a056",
	"62d795e20ffce53a09e2a058"
],
"status_action_order": [
	"62d795e20ffce53a09e2a05f"
],
"item_action_order": [
	"62d795e20ffce53a09e2a066",
	"62d795e20ffce53a09e2a067",
	"62d795e20ffce53a09e2a068",
	"62d795e20ffce53a09e2a06a"
]

GraphQLで実行する場合

もしGraphQLで試す場合には次のように入力してください。

クエリー

query(
  $datastoreId: String!,
  $datastoreItemDetailParams: DatastoreItemDetailParams,
  $itemId: String!,
  $projectId: String
) {
  getDatastoreItemDetails(
    datastoreItemDetailParams: $datastoreItemDetailParams,
    datastoreId: $datastoreId,
    itemId: $itemId,
    projectId: $projectId
  ) {
    title
      rev_no
      field_values
      status_list
      item_actions
      status_actions
      status_order
      status_action_order
      item_action_order
  }
}

クエリー変数（例）

itemIdなどは変更が必要かも知れません。

{
  "datastoreId": "Db-todo1",
	"datastoreItemDetailParams": {
    "format": "map"
  },
	"itemId": "62d795e38e4602d1ddf516aa",
	"projectId": "APP-todo1"
}

HTTPヘッダー

ログインを実行して取得したデータに変更してください。

{
  "Authorization": "Bearer eyJ...jpg"
}

まとめ

データストアの一覧取得と合わせて利用することで、データ取得系は簡単にマスターできるでしょう。GraphQLを素のまま使うのは技術的な難易度が高いですが、Hexabase TypeScript SDKを使えば、VueやReactなどと連携したWebアプリを素早く開発できるようになります。2023年04月現在絶賛開発を進めていますので、ぜひ試していただいてフィードバックいただければ嬉しいです！

hexabase/hexabase-js