はじめに

microCMSではデフォルトのGETリクエスト数が10件であり、10件以上のデータを取得するためにクエリストリングでGETをできるようにしました。

実装

1.GET リクエストのメソッド

// api request method
type methodType = 'GET' | 'POST' | 'PUT' | 'DELETE';

export const getBlogs = (limit: number, endpoint: string, methodType: methodType) =>
  fetch(`https://${process.env.SERVICE_DOMAIN}.microcms.io/api/v1/${endpoint}?limit=${limit}`, {
    method: methodType,
    headers: { 'X-MICROCMS-API-KEY': process.env.API_KEY || '' },
  }).then((result) => result.json());

process.env.SERVICE_DOMAINは、microCMSの自身のドメインを入力してください。
例えばabc.microcms.io/ならabcになります。

• limit：リクエストで受け取る数
• endpoint：APIの名前
• methodType：APIのリクエストタイプ、詳細はfetchのドキュメントを確認ください

process.env.API_KEYにはmicroCMSのAPIキーを代入するようにします。

process.envについての使い方の詳細は、【2023】MicroCMS×Next.js×TypeScriptでJamStackなブログの作り方で紹介しているので併せて確認してみてください。

他のクエリストリングを使いたい場合は、公式のドキュメントを確認してみてください。

2.受け取り処理

const all_blog = await getBlogs(100, 'blogs', 'GET');

これでall_blogに100件までのコンテンツをGETできます！

最後に

microcms-js-sdkのcreateClientでできれば楽そうでしたが、見つけられなかったので自作メソッドを作成しました。