Zenn
🧩

HeadlessCMS「Strapi」のAPIレスポンスを整理する

2023/09/26に公開
Strapi
#
HeadlessCMS
tech

はじめに

HeadlessCMSをつかうことでフロントエンドとバックエンドを切り離してコンテンツ管理を行うことが出来ます。
Node.jsで作成したアプリケーションにHeadlessCMSの導入を検討していたとき、「Strapi」というオープンソースのHeadlessCMSが候補に上がりさわってみました。「Strapi」でコンテンツ管理を行い、APIをかいしてフロントエンドに情報を渡すことができます。こちらを検討する上で直面したTipsについて書き残します。

Tips

「createdAt」「updatedAt」「publishedAt」キーを取捨選択する

デフォルトの設定では、データを登録すると「createdAt」「updatedAt」「publishedAt」といった日時のキーが追加されます。そのため、「Strapi」でデータをリレーションをつかって登録していくとAPIレスポンスのネストが深くなり、さらに項目ごとにさきほどの日時データが付属するので非常に見づらいレスポンスになります。

「createdAt」「updatedAt」「publishedAt」が含まれたレスポンスの例
{
    "data": [
        {
            "id": 1,
            "attributes": {
                "ver": "1.0.0",
                "data1": "xxxx",
                "createdAt": "2023-09-05T02:10:12.273Z",
                "updatedAt": "2023-09-05T06:06:27.575Z",
                "publishedAt": "2023-09-05T02:44:05.136Z",
                "summaryNameList": {
                    "data": [
                        {
                            "id": 1,
                            "attributes": {
                                "data2": "yyyy",
                                "createdAt": "2023-09-05T02:10:33.589Z",
                                "updatedAt": "2023-09-05T05:00:23.271Z",
                                "publishedAt": "2023-09-05T02:11:48.634Z",
                                "summaryList": {
                                    "data": {
                                        "id": 1,
                                        "attributes": {
                                            "createdAt": "2023-09-05T02:10:54.271Z",
                                            "updatedAt": "2023-09-05T05:07:35.471Z",
                                            "publishedAt": "2023-09-05T02:11:57.017Z",
                                            "data3": {
                                                "data": [
                                                    {
                                                        "id": 1,
                                                        "attributes": {
                                                            "data4": "zzzz",
                                                            "createdAt": "2023-09-05T02:20:15.975Z",
                                                            "updatedAt": "2023-09-05T05:17:58.982Z",
                                                            "publishedAt": "2023-09-05T02:20:17.228Z"
                                                        }
                                                    },
                                                    {
                                                        "id": 2,
                                                        "attributes": {
                                                            "data4": "aaaa",
                                                            "createdAt": "2023-09-05T05:02:22.382Z",
                                                            "updatedAt": "2023-09-05T05:02:25.346Z",
                                                            "publishedAt": "2023-09-05T05:02:25.344Z"
                                                        }
                                                    }
                                                ]
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    ]
                }
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 2
        },
        "hoge": "hoge"
    }
}

そこで、自動で生成される「createdAt」「updatedAt」「publishedAt」を非表示にして整理するには、Strapiのディレクトリから「api」→「${APIの名前}」→「content-types」→「scheme.json」を編集します。
そして、「scheme.json」にprivateAttributesキーを追加し、非表示したいキーを追加します。
「createdAt」「updatedAt」「publishedAt」を非表示にするには、下記のように記述します。

{
  "kind": "collectionType",
  "collectionName": "categories",
  "info": {
　　　　　　　　　　　　...省略...
  },
  "options": {
    "draftAndPublish": true,
    "privateAttributes": [
      "createdAt",
      "updatedAt",
      "publishedAt"
    ]
  },
  "pluginOptions": {},
  "attributes": {
  　　　　　　　　　...省略...
  }
}

そうすると、「createdAt」「updatedAt」「publishedAt」キーを非表示にしたレスポンスが得られます。

「attributes」や「data」キーを取捨選択する

さきほど「createdAt」「updatedAt」「publishedAt」キーを非表示にしました。
しかし、「attributes」や「data」キーがあることでjsonの階層がわかりづらいのでこちらも整理して表示してみます。こちらのキーを非表示にするには「strapi-plugin-transformer」というプラグインを別途導入すると便利です。Githubに説明があるように、npmもしくはyarnで簡単に導入できます。

npm install strapi-plugin-transformer
# OR
yarn add strapi-plugin-transformer

使い方は簡単で、Strapiのディレクトリ内にあるファイル./config/plugins.jsに下記を記述してStarpiを実行するだけです。※ファイルがない場合は新規作成する必要があります。

module.exports = ({ env }) => ({
    // ..
    'transformer': {
        enabled: true,
        config: {
            responseTransforms: {
                removeAttributesKey: true,
                removeDataKey: true,
            }
        }
    }
});

APIリクエストしたとき全ネストを含むレスポンスを得る方法

地味に理解するまで時間がかかったのは、APIリクエストしたとき全ネストのレスポンスを得る方法です。
こちらに関しては公式のドキュメントに「REST API: Population & Field Selection」に説明があります。リクエストするときに、populateパラメータを使いこなすことが重要のようです。
ただ全ネストを含むレスポンスを得るだけなら、こちらのプラグイン「Populate deep」が便利でした。npmもしくはyarnでインストールして

npm install strapi-plugin-populate-deep
# or
yarn add strapi-plugin-populate-deep

そのあと取得したいAPIに対して、例えばこのように実行すると全レスポンスを取得することができます。

http://localhost:1337/api/test?populate=deep

おわりに

「Starpi」はさくっと導入できて便利でした。
実際はリレーションが深くなりすぎないように、コンテンツを整理したほうが良いのかもしれません。

Discussion