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や、ステータス管理などの機能があります。ぜひ、それらの機能も利用してください。