こんばんは。
今日は「MicroCMS：microcms-js-sdkを使ってデータをフィルタリング方法」について説明します。
microcms-js-sdk では、APIリクエスト時にクエリパラメータを指定してデータをフィルタリングすることができます。
これにより、特定の条件に一致するデータを取得することができます。
基本的な使い方
まず、microcms-js-sdk をインストールして、API クライアントをセットアップします。
npm install microcms-js-sdk
次に、microcms-js-sdkのセットアップを行います。
import { createClient } from 'microcms-js-sdk';
// APIクライアントのセットアップ
const client = createClient({
serviceDomain: 'your-service-domain', // ご自身のサービスのドメイン名
apiKey: 'your-api-key' // APIキー
});
クエリパラメータを使ったフィルタリング
MicroCMS では、以下のようなフィルタリングオプションを使うことができます。
- filters: 特定のフィールドでフィルタリング（例: filters=field_name[条件]=値）
- limit: 取得するデータの数
- offset: データの開始位置（ページネーション）
- orders: ソート順
- fields: 必要なフィールドを指定（レスポンスを軽量化）
例
例1: 特定のフィールド値でフィルタリングする
例えば、category フィールドが 'tech' の記事だけを取得する場合:
client.get({
endpoint: 'posts', // エンドポイント名
queries: {
filters: 'category[equals]tech'
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
ここで、filters はフィールドに対する条件を指定します。この場合、categoryフィールドが'tech'のデータを取得します。
例2: 複数の条件を組み合わせる
複数のフィルタ条件を組み合わせることもできます。たとえば、categoryが'tech'で、published フィールドがtrueの記事を取得する場合:
client.get({
endpoint: 'posts',
queries: {
filters: 'category[equals]tech&&published[equals]true'
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
例3: ソートやページネーション
ordersを使ってソートを行い、limitとoffsetを使ってページネーションを実現できます。
例えば、publishedAtフィールドで降順にソートし、最初の10件だけ取得する場合:
client.get({
endpoint: 'posts',
queries: {
orders: '-publishedAt', // 降順
limit: 10
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
ordersでpublishedAtを降順(-publishedAt)に設定し、limitで取得する件数を指定します。
例4: 特定のフィールドだけを取得する
データのレスポンスから、特定のフィールドだけを取得したい場合、fields クエリパラメータを使います。
client.get({
endpoint: 'posts',
queries: {
fields: 'id,title' // id と title のみを取得
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
microcms-js-sdkでは、filtersやordersなどのクエリパラメータを使用することで、データの取得時に柔軟にフィルタリングやソートが可能です。具体的な要件に合わせて、これらを組み合わせることで、必要なデータを効率的に取得できます。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。