このガイドでは、@blocklet/js-sdk をインストールし、最初の API コールを行うための基本的な手順を説明します。ほんの数分で使い始められるようにすることが目標です。
インストール
まず、SDK をプロジェクトに追加する必要があります。お好みのパッケージマネージャーを使用できます:
Installation
npm install @blocklet/js-sdk
# or
yarn add @blocklet/js-sdk
# or
pnpm add @blocklet/js-sdk基本的な使用方法
SDK は直感的に使えるように設計されています。最も一般的な2つのユースケースは、コアなBlockletサービス(ユーザー認証など)へのアクセスと、独自のBlockletのバックエンドへの認証済みリクエストの作成です。
コアサービスへのアクセス
SDK を使用する最も簡単な方法は、getBlockletSDK シングルトンファクトリをインポートすることです。この関数は、アプリケーション全体で常に同じ SDK インスタンスを取得することを保証し、状態管理を簡素化します。
以下に、現在のユーザーのプロファイルを取得するための使用方法を示します:
Get User Profile
import { getBlockletSDK } from '@blocklet/js-sdk';
const sdk = getBlockletSDK();
async function fetchUserProfile() {
try {
const { data: userProfile } = await sdk.user.getProfile();
console.log('User Profile:', userProfile);
} catch (error) {
console.error('Failed to fetch user profile:', error);
}
}
fetchUserProfile();sdk インスタンスは、user、userSession、blocklet などのさまざまなサービスへのアクセスを提供します。これらのサービスは、よく知られた Blocklet サービスエンドポイントとの通信を処理します。
あなたのBlockletへのAPIリクエストの作成
独自のBlockletのバックエンドAPIと通信するために、SDKは createAxios と createFetch ヘルパー関数を提供します。これらはAxiosとネイティブのFetch APIのラッパーであり、認証済みリクエストに必要なすべてが事前に設定されています。
これらは自動的に処理します:
- コンポーネントに適した
baseURLの設定。 Authorizationヘッダーへのセッショントークンの付与。- セキュリティのための
x-csrf-tokenの含入。 - セッショントークンが期限切れになった場合の自動更新。
createAxios を使用してバックエンド用の API クライアントを作成する方法は次のとおりです:
Create an API Client
import { createAxios } from '@blocklet/js-sdk';
// Create an Axios instance configured for your Blocklet
const apiClient = createAxios();
async function fetchData() {
try {
// Make a request to your own backend, e.g., GET /api/posts
const response = await apiClient.get('/api/posts');
console.log('Posts:', response.data);
} catch (error) {
console.error('Failed to fetch data:', error);
}
}
fetchData();この設定により、トークンやヘッダーを手動で管理する必要はありません。SDK が認証フローをシームレスに処理します。
次のステップ
これで、@blocklet/js-sdk をインストールし、最も一般的な2つのシナリオで使用する方法を学びました。さらに深く掘り下げるには、次のガイドを探索することをお勧めします: