LoginSignup
0
1

Hexabase TypeScript SDKを使って入力する型をチェックする

Posted at

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 に対して処理を行います。

プロジェクトを取得する

データレポートはプロジェクトに紐付きます。そこで、まず利用するプロジェクトを取得します。

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

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

client.currentWorkspace

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

client.setWorkspace(newWorkspaceId);

そのワークスペースに紐付いているプロジェクトを取得します。

const project = await client.currentWorkspace.projects(projectId);

データストアへのアクセス時に必要な情報について

データストアへアクセスする際には以下の情報が必要です。

  • データストアID datastoreId

さらにデータ取得を行う際の情報(ページ数、取得件数など) params が指定できます。以下がアクセス例です。

const project = client.currentWorkspace.project(projectId);
const datastore = project.datastore(datastoreId);
const items = await datastore.items();
const item = items[0];

// 新しいデータを保存する場合
const item = await datastore.item();

データ型について

Hexabaseでは以下のデータ型が存在します。

データ型

Hexabaseでは以下のデータ型が存在します。

データ型 指定できる型 複数指定
テキスト 文字列
複数行テキスト 文字列
選択肢 文字列
ラジオ 文字列
チェックボックス 文字列の配列
自動採番 指定不可
数値 数字
計算式 指定不可
日付時刻 日付
添付ファイル FileObjectの配列
ユーザー ユーザーの配列
データベース参照 アイテム

上記のような内容で入力チェックが行われます。

テキストの例

テキスト型の例です。間違った型で値をセットすると、例外処理になります。

const message = 'Hello';
item.set('textField', message);
try {
	item.set('textField', 100);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}
try {
	item.set('textField', new Date);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}
try {
	item.set('textField', ['a']);
} catch (e) {
	expect(e instanceof Error).toBe(true);
}

チェックボックス、セレクト、ラジオの例

チェックボックスやセレクト、ラジオはあらかじめ選択肢を管理画面で作成します。この選択肢にマッチしていない値は指定できません。


const checkbox = await datastore.field('checkboxField');
const options = await checkbox.options();
// 選択肢の指定は日本語、英語のラベル、またはオプションのdisplayIdが指定できます
const newOptions = [options![0].value.en, options![1].value.ja];
item.set('checkboxField', newOptions);

try {
  // 存在しないものを指定
	item.set('checkboxField', ['NO_VALUE']);
} catch (e) {
  // エラーに
	expect(e instanceof Error).toBe(true);
}

ファイル、アイテムの例

ファイルはFileObject、アイテムはItemを指定してください。

const item = await datastore.item();
const field = await datastore.field('itemField');
const refItem = await field.datastore.item();
refItem.set('Title', 'test');
await refItem.save();
// nullは指定できます
item.set('itemField', null);
item.set('itemField', refItem);

ファイルは item.file() でFileObjectのインスタンスが返ってきます。

// nullは指定できます
item.set('fileField', null);
const file = item.file();
const data = new Blob(['test'], { type: 'text/plain' });
file
	.set('data', data)
	.set('name','test.txt');
item.set('fileField', [file]);

まとめ

Hexabaseは柔軟なクラウドデータベースですが、あらかじめスキーマ設計を行うことで、それに合わせた入力チェックが行われます。クライアントサイドでチェックできるので、サーバーへ送信前に誤った値が入らないように開発できます。

ぜひHexabaseを使ってアプリ開発を行ってください。

株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1