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

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できる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` というオブジェクトが取得できます。

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

## 初期化

HexabaseClientを初期化します。

```js
const client = new HexabaseClient();
```

### 認証

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

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

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

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

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

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

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

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

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

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

```js
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が配列になっています。

```json
"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ヘッダー

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

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

## まとめ

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

[hexabase/hexabase-js](https://github.com/hexabase/hexabase-js)