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

この記事ではHexabase TypeScript SDKのインストールと、ユーザー情報の取得・アップデート方法を解説します。

インストール

インストールは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.currentUser で取得できます。

const user = client.currentUser;

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

ユーザー情報の取得

ユーザー情報を更新した後など、ユーザー情報を再取得する際には fetch() を使います。レスポンスはユーザーオブジェクトです。

const user = await client.currentUser!.fetch();
expect(user.email).toBe(email);
expect(user.currentWorkspace.id).toBe(client.currentWorkspace!.id);

ユーザー情報の更新

ユーザー情報を更新する際には save メソッドを使います。アップデート対象はユーザー名とユーザーコードです。

const user = await client.currentUser!.fetch();
const newUsername = 'test';
user.set('username', newUsername);
const res = await user.save();
expect(res).toBe(true);

ユーザーアイコンのアップデート

ユーザーアイコンを変更する際には updatePicture メソッドを使います。Blob形式のファイルを引数に渡します。ブラウザの場合は File オブエクトを渡してください。

const res = await user.updatePicture(blob);
expect(res).toBe(true);

ユーザーアイコンの削除

ユーザーアイコンを削除する際には deletePicture メソッドを使います。

const res = await user.deletePicture();

ユーザーアイコンの取得

ユーザーアイコンは user.profilePicture で取得できます。これは img タグの src に使えるURLです。

<img src={user.profilePicture} />

まとめ

Hexabase TypeScript SDKを使って、ユーザー情報の取得、更新、アイコンのアップデート・削除を行う方法を解説しました。Hexabaseには他にもFaaSや、ステータス管理などの機能があります。ぜひ、それらの機能も利用してください。

Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート