1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Hexabase TypeScript SDKを使ってデータ同士を紐付ける

Last updated at Posted at 2023-04-26

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 workspace = client.currentWorkspace!;
const projects = workspace.project(projectId);
const datastore = project.datastore(datastoreId);

アイテムを取得する

データストアからアイテムを取得します。検索条件も設定できますが、今回は単純に取得しています。

const items = datastore.items();
const item = items[0];

アイテム同士を紐付ける際の準備

アイテム同士を紐付ける際には、まず管理画面で関連付けされたデータベースの設定が必要です。データストアの設定にて、関連付けるテーブルを指定してください。

image.png

また、 関連付けられるテーブルにはユニークなフィールドが必要です 。こちらもフィールド作成の際に指定してください。

アイテム同士を紐付ける

データの紐付け方には2種類あります。

  • フィールドの紐付けるDB参照
  • レコードに紐付けるデータリンク

DB参照はフィールドの設定でデータベース参照を使って定義します。データリンクの場合は、管理画面での関連付けられたデータベースの設定だけで大丈夫です。

image.png

フィールドの紐付けるDB参照

実際のコードです。 Linkeditem というフィールドデータベース参照として定義しています。

await item1
  .set('name', 'item1')
  .set('price', 100)
  .set('Linkeditem', item2)
  .save();

データリンク

実際のコードです。 link を使います。データリンクは複数定義できます。

await item1
  .set('name', 'item1')
  .set('price', 100)
  .link(item2)
  .link(item3)
  .save();

逆に削除する場合には unlink を使います。

await item1
  .unlink(item2)
  .save();

組み合わせも可能です。

await item1
  .set('name', 'item1')
  .set('price', 100)
  .link(item2)
  .link(item3)
  .unlink(item4)
  .save();

まとめ

データリンクやデータベース参照はいわばリレーショナルデータベースとして利用できます。複雑なリレーションも実現できますので、ぜひ活用してください。

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

hexabase/hexabase-js

1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?