Hexabase TypeScript SDKを使ったデモ（タスク管理）

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

この記事ではv2系になって新しくなったHexabase TypeScript SDKのインストールと、データストア（クラウドデータベース）の操作方法を紹介します。

## デモ

以下はデモアプリです。データの登録と、チェックをクリックした際にデータの削除を行っています。

https://stackblitz.com/edit/stackblitz-starters-q7uedt?embed=1&file=pages%2Findex.tsx

## インストール

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

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

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

## インポート

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

```jsx
import { HexabaseClient, Item } from "@hexabase/hexabase-js";
```

## 初期化

HexabaseClientを初期化します。

```tsx
// 本番閑居向け
const client = new HexabaseClient();

// 開発環境向け
const client = new HexabaseClient('dev');
```

なお、すでに認証済みだった場合に備えて、2番目の引数にトークンを指定できます。

```tsx
const client = new HexabaseClient('dev', 'YOUR_TOKEN');
```

### 認証

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

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

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

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

## ワークスペースとプロジェクト、データストアの設定

Hexabsaeではワークスペースとプロジェクト、そしてデータストアがそれぞれ1:nの関係になっています。そこで、それらを設定します。

そしてデータストアからアイテム（行相当）を取得する際には `items` メソッドを使います。今回はNext.jsを使っているので、それぞれステートに保存しています。 `items` メソッドには検索条件を指定できますが、今回は省略しています。

```tsx
// Todo table
const [datastore, setDatastore] = useState(null);
// Tasks
const [items, setItems] = useState<Item[]>([]);

// Init
const initialize = async () => {
  // Set workspace
  await client.setWorkspace('YOUR_WORKSPACE_ID');
  // Find project
  const project = await client.currentWorkspace!.project('YOUR_PROJECT_ID');
  // Find datastore (todo table)
  const datastore = await project.datastore('YOUR_DATASTORE_ID');
  // Set datastore
  setDatastore(datastore);
  // Get tasks
  const items = await datastore.items();
  // Set tasks
  setItems(items);
};

useEffect(() => {
  initialize();
}, []);
```

## データの表示

取得した `items` を一覧表示する際には以下のように処理します。 `item.get` に対して `<string>` のように指定することで文字列の返却として処理されます。

```jsx
<ul>
  {items.map((item) => (
    <li key={item.id}>
      <span
        onClick={() => done(item)}
      >✓</span>
      {item.get<string>('Title')}</li>
  ))}
</ul>
```

もし `Title` というカラムがない場合には例外が返ってきます。それが問題ある場合には2番目の引数にデフォルト値を指定してください。

```tsx
item.get<string>('Title2', 'デフォルトの値');
```

## データの作成

新しいデータを作成する場合には、以下のように処理します。 `value` は入力値です。

データストアの `item` メソッドで新しいアイテムを作成します。その場合でも `async/await` なので注意してください。後はあらかじめ作成しているカラム（今回は `Title` ）に対して `value` をセットします。

それが終わったら `save` メソッドでデータが保存されます。

```tsx
const [value, setValue] = useState('');

// Save item to datastore
const submit = async (e) => {
  e.preventDefault();
  // Create item
  const item = await datastore.item();
  item.set('Title', value);
  await item.save();
  // Update list
  setItems([...items, item])
  // Reset input value
  setValue('');
};
```

## データの削除

データの削除は対象となる `item` に対して `delete` メソッドを実行します。

```tsx
// Delete task
const done = async (item: Item) => {
  // Delete task
  await item.delete();
  // Remove deleted task from tasks
  setItems(items.filter(i => i.id !== item.id));
}
```

## まとめ

SDKを使うことで、Hexabaseのデータストアを簡単に利用できます。ぜひWebアプリケーション開発に活用してください。

Hexabaseには他にもファイルストレージやスクリプトなどの機能があります。それらの機能も利用してください。