TypeScript SDK
はじめに
Orion TypeScript SDKを使い始めるための最初のステップを解説します。
インストール
Orionは、依存関係を追加するだけで、新規または既存のプロジェクトにインストールできます。
NPMを使用する場合
npm install @tailflow/laravel-orion --save
Yarnを使用する場合
yarn add @tailflow/laravel-orion
設定
パッケージをインストールしたら、次のステップとして、APIと連携できるように設定(初期化)を行います。
import {Orion} from "@tailflow/laravel-orion/lib/orion";
Orion.init('https://your-api.test');
Orion.setToken('access-token-here');
これで完了です。続いて、モデルのセットアップに進みましょう。
モデルのセットアップ
最初のモデルを作成して、APIにクエリを実行してみましょう。Laravel API側にある任意のモデルを選んでください。ここでは例としてPostモデルを使用します。
TypeScriptアプリにPostクラスを追加し、Modelを継承します。
// post.ts
import {Model} from "@tailflow/laravel-orion/lib/model";
export class Post extends Model {
}
次に、モデルの属性とリソース名を定義します。
// post.ts
import {Model} from "@tailflow/laravel-orion/lib/model";
export class Post extends Model<{
title: string,
body: string
}> {
public $resource(): string {
return 'posts';
}
}
これでモデルのセットアップは完了し、APIにクエリを実行する準備が整いました。
APIへのクエリ
Orion TypeScript SDKを使うと、非常に簡単にAPIを利用できます。
Sanctumを使用している場合は、APIにクエリを実行する前にCSRF保護を初期化する必要があります。その方法についてはSPA向けSanctum連携を参照してください。
// アプリ内のどこかで
import {Post} from '../post.ts';
// 投稿の一覧を取得
const posts = await Post.$query().get();
// 投稿を検索
const posts = await Post.$query().lookFor('some value').search();
// 投稿を作成
const newPost = await Post.$query().store({
title: 'New post' // <-- 属性が型付けされているため、ここで便利な自動補完が効きます
});
console.log(newPost.$attributes.title); // <-- ここでも同様です
// 投稿を取得
const post = await Post.$query().find(5);
// 投稿を更新
post.$attributes.title = 'Updated post';
await post.$save();
// または
await post.$save({title: 'Updated post'}); // <-- ここでも
// または
const updatedPost = await Post.$query().update(5, {
title: 'Updated title' // <-- もちろんここでも
});
// 投稿を削除
const deletedPost = await Post.$query().delete(5);
// または
await post.$destroy();