Hexabase TypeScript SDKを使ってSQL風にデータをCRUD操作する

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

この記事ではHexabase TypeScript SDKのインストールと、SQL風にデータの取得、作成、更新、削除を行う方法を紹介します。

インストール

インストールは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とパスワード、またはトークンが必須です。

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

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

現在のワークスペースを取得する

ログインした時点でHexabaseClientのcurrentWorkspaceが現在のワークスペースオブジェクトになっています。

client.currentWorkspace

ワークスペースを切り替える場合には、 setWorkspace メソッドを使います。

client.setWorkspace(newWorkspaceId);

クエリーオブジェクトを作成する

クエリーオブジェクトはプロジェクトを指定して作成します。

const query = hexabase.query(projectID);

このクエリーオブジェクトに対してCRUD操作を指定します。

検索する（SELECT）

SQLでいうSELECTは以下のように記述します。

const items = await query
      .from(datastoreID)
      .select('*');

取得するフィールドを制限する場合は以下のようにします。

const res = await query
      .from(datastoreID)
      .select('textInputUnique, autoNum');

他にもlimit/offset/orderなどが利用できます。

const res = await query
      .from(datastoreID)
      .limit(20)
      .offset(10)
      .order('autoNum', 'asc')
      .select('*');

件数だけ取得する際には count を使います。

const numbers = await query
      .from(datastoreID)
      .count();

検索条件は where で指定します。whereは配列を与えるとand条件になります。

const updatedItems = await query
      .from(datastoreID)
      .where(query.condition.equalTo('i_id', item.id))
      .select();

作成する（INSERT）

作成は insert を使います。各フィールドの値を指定します。

const item = await query
      .from(datastoreID)
      .insert(
        {
          textInputUnique: 'name',
          number: 100,
          number2: 200,
        }
      ) as Item;

複数同時に作成もできます。

const items = await query
      .from(datastoreID)
      .insert([
        {
          textInputUnique: 'name 1',
          number: 100,
          number2: 200,
        },
        {
          textInputUnique: 'name 2',
          number: 100,
          number2: 200,
        },
        {
          textInputUnique: 'name 3',
          number: 100,
          number2: 200,
        },
      ]) as Item[];

更新する（UPDATE）

データを更新する場合は update を使います。同時に指定する where 条件にマッチするデータを更新します。

const updatedItems = await query
      .from(datastoreID)
      .where(query.condition.equalTo('i_id', item.id))
      .update({
        textInputUnique: newName,
        number: NUMBER1,
        number2: NUMBER2,
      });

削除する（DELETE）

削除は delete を使います。 update と同じく、 where 条件にマッチするデータを削除します。

const res = await query
      .from(datastoreID)
      .where(query.condition.equalTo('number', NUMBER1))
      .delete();

まとめ

Hexabase TypeScript SDKはO/Rマッパーとして利用することも、今回のようにSQL風に実行もできます。主にデータストアのCRUD操作用になります。

Hexabase TypeScript SDKを使えば、VueやReactなどと連携したWebアプリを素早く開発できるようになります。2023年05月現在絶賛開発を進めていますので、ぜひ試していただいてフィードバックいただければ嬉しいです！

hexabase/hexabase-js