素のJavaScript（node）だけでmicroCMSのデータを全て取得してみた

例えばNextJSのビルド前だったりGatsbyJSのgatsby-node.js(nodeしか使えないページ)、ライブラリが使えない、などの何らかの形で素のJSだけでお手軽にデータを取得したい時があります。

microCMSがそのケースでした。その時に少し工夫が必要だったので知見としてコードを載せてみました。

GETのデフォルトが10件までしか取得できない

通常は以下のようなコードで取得すると思います。

node.js

const axios = require('axios').default;
require('dotenv').config({ path: '../../.env' }); // package.jsonから動かす場合はpathが通っていると思われるので不要。必要であれば.envのあるファイルの相対パスを記載

const getMicroCMSdata = async() => {
  const url = `https://hoge.microcms.io/api/v1/hoge`;
  const apiKeyHeaderOption = { headers : { "X-API-KEY": process.env.MICROCMS_API_KEY }};

  return await axios.get(url, apiKeyHeaderOption).then(r => r.data);
}

console.log(getMicroCMSdata().then(data => console.log(data)));

しかし記事データを確認すると10件しか取得できていません。
取得したJSONの中身を確認すると

{
  contents: [
    {省略}...
  ],
  totalCount: 100,
  offset: 0,
  limit: 10
}

となるように limit: 10 が返ってきています。確認したところやはり limit: 10 が取得できる件数を示していました。
したがって、この limit の上限を自身のコンテンツの数（totalCount以上）に設定する必要があります。

ただし、面倒であれば url に ?limit=1000 のような大きめの数字でオプションをつけてあげれば済みます。
ですがそれだとちょっと気持ち悪いので先に totalCount を取得してから ?limit=${totalCount} となるようなコードを書きました。

２回GETさせてみた

node.js

const axios = require('axios').default;
require('dotenv').config({ path: '../../.env' }); // package.jsonから動かす場合はpathが通っていると思われるので不要。必要であれば.envのあるファイルの相対パスを記載

const getMicroCMSdata = async() => {
  const url = `https://hoge.microcms.io/api/v1/hoge`;
  const apiKeyHeaderOption = { headers : {"X-API-KEY": process.env.MICROCMS_API_KEY }};

  const getUrlOption = (number, url) => {
    const UrlandOption = url + `?limit=${number}`;

    return String(UrlandOption);
  }

  // microCMSのコンテンツを引っ張ろうとするとデフォルトでlimit=10のオプションがついており全てのコンテンツを引っ張ってこれない。totalCountでコンテンツ総数をチェック
  const getTotalCountUrl = getUrlOption(0, url),
    totalCountUrlData = await axios.get(getTotalCountUrl, apiKeyHeaderOption).then(r => r.data),
    { totalCount } = await totalCountUrlData;

  // ２回目のGET
  const getContentUrl = getUrlOption(totalCount, url),
    contentUrlData = await axios.get(getContentUrl, apiKeyHeaderOption).then(r => r.data),
    { contents } = await contentUrlData;

  return contents;
}

console.log(getMicroCMSdata().then(data => console.log(data)));

getUrlOption の関数で引数に応じた ?limit=${number} のオプションをURLに追加させています。

初回のGET時は ?limit=0 にして無駄なリソースを取得しないようにして、２回目のGET時には取得した totalCount の値を渡して実行するようにしました。