Hexabase TypeScript SDKを使ってプロジェクトをCRUD操作する #TypeScript

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

この記事ではHexabase TypeScript SDKのインストールと、プロジェクトのCRUD操作について紹介します。

インストール

インストールは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);

すべてのプロジェクトを取得する

プロジェクトはワークスペース以下に紐付く形で定義されています。すべてのプロジェクトを取得する場合には、ワークスペースの projects メソッドを呼びます。

const workspace = client.currentWorkspace!;
const projects = await workspace.projects();

プロジェクトと紐付いたデータストアを取得する

ワークスペースに紐付いたプロジェクトとともにデータストアも一緒に取得するためのメソッド projectsAndDatastores もあります。

const workspace = client.currentWorkspace!;
const { projects, datastores } = await workspace.projectsAndDatastores();

プロジェクト作成時のテンプレートを取得する

プロジェクトを作成する際には、テンプレート（ガントチャートなど）を指定可能です。これは独自に作成することもできるので、共通した定義のプロジェクトを作成しておいて、テンプレートとして使い回せます。

const workspace = client.currentWorkspace!;
const templates = await workspace.projectTemplates();

プロジェクトを作成する

プロジェクトを作成する際には、名前を指定します。日英を指定できます。

const workspace = client.currentWorkspace!;
const project = await workspace.project();
project
  .set('name', {
    ja: '新しいプロジェクト',
    en: 'new project'
  })
  .set('template_id', templates[0].id); // テンプレートを指定する場合
await project.save();

プロジェクトの詳細を取得する

プロジェクト（に限らずデータストアなども）の詳細情報を取得する際には getDetail メソッドを用意しています。

const workspace = client.currentWorkspace!;
const projects = await workspace.projects();
const project = projects[0];
// 以下でも可能
// const project = workspace.project(projectId);
// 詳細取得
await project.getDetail();

プロジェクトを更新する

プロジェクトの名前やテーマ（管理画面の配色）を変更できます。

project
  .set('name', {
    en: 'test update',
    ja: 'test update',
  })
  .set('theme', 'blue');
await project.save();

プロジェクトを削除する

プロジェクトを削除する際は delete メソッドを使います。

const res = await project.delete();

まとめ

プロジェクトは下にデータストアやレポートなどが紐付き、アプリケーション開発する際には最も使う部分になります。

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

hexabase/hexabase-js