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月現在絶賛開発を進めていますので、ぜひ試していただいてフィードバックいただければ嬉しいです！