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

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

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

デモ

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

インストール

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

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

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

インポート

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

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

初期化

HexabaseClientを初期化します。

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

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

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

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

認証

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

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

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

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

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

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

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

// 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> のように指定することで文字列の返却として処理されます。

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

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

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

データの作成

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

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

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

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 メソッドを実行します。

// 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には他にもファイルストレージやスクリプトなどの機能があります。それらの機能も利用してください。