Strapi のレスポンスの階層を浅くして扱いやすくする(v4の形からv3の形に変更)

まずは、レスポンスの整形をするための関数を置くためのファイル./config/functions.tsを作成します。

# Strapi プロジェクトに移動する
$ cd ~/StrapiProjects/vps-docker-strapi

# functions.ts を作成する
$ touch config/functions.ts

まずは、find (CollectionTypeなら配列でデータを返す)をカスタマイズします。

GET http://localhost:1337/api/newsを叩いた時のレスポンスが整形されます。

module.exports = {
  // 各Content-TypeのController から呼び出すメソッド
  convertToV3Data: () => ({
    // Core の findを上書きする
      async find(ctx) {
        ctx.query = { ...ctx.query, populate: "*" }
        const response = await super.find(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }
        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      },
  }),
}

/**
 * strapi v4のレスポンスをv3の形に変換する
 */
const toV3Data = (data, query) => {
  if (data == null) { return null }

  // 配列の場合は1つずつ変換する
  if (data instanceof Array) {
    return data.map((d) => toV3Data(d, query)).filter((d) => d)
  }

  return {
    id: data.id,
    ...Object.entries(data.attributes).reduce((acc, [key, value]) => {
      // さらに階層が深い場合に
      if (value != null && typeof value === "object" && "data" in value) {
        // { data: {欲しいオブジェクト}} の形になっているので data から取り出しておく
        const data = value["data"]

        value = toV3Data(data, query)
      }
      return { ...acc, [key]: value }
    }, {})
  }
}

参考の記事ではmeta情報が消えてしまっていましたが、metaが残るように変更しています。

./src/api/コンテンツタイプ名/controllers/コンテンツタイプ名.tsを編集します。

# Strapi プロジェクトに移動する
$ cd ~/StrapiProjects/vps-docker-strapi

# VSCodeで開く
$ code src/api/news/controllers/news.ts 

ここにあります。

├── src
│   ├── api
│   │   ├── news(コンテンツ名)
│   │   │   ├── controllers
│   │   │   │   ├── news.ts (コンテンツ名.ts)

2つ目の引数にstrapi.config.functions.convertToV3Dataを追加します。

/**
 * news controller
 */

import { factories } from '@strapi/strapi'

export default factories.createCoreController('api::news.news', strapi.config.functions.convertToV3Data);

これで、GET http://localhost:1337/api/newsを叩いた時のレスポンスが整形されます。

続いて、単体取得やPOST にも対応していきます。
STEP.1のfunctions.tsに追記します。

Strapi ドキュメントの Extend core controllersで、core の controllers の拡張方法が書かれているので、そこを参考に追記していきます。

module.exports = {
    convertToV3Data: () => ({
      async find(ctx) {
        ctx.query = { ...ctx.query, populate: "*" }
        const response = await super.find(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }
        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      },

      async findOne(ctx) {
        if (ctx.request.url.includes("/count")) {
          const {
            meta: {
              pagination: { total },
            },
          } = await super.find(ctx);
          return total;
        }

        ctx.query = { ...ctx.query, populate: "*" }

        const response = await super.findOne(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }

        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      },

      async create(ctx) {
        const response = await super.create(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }
        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      },

      async update(ctx) {
        const response = await super.update(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }
        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      },

      async delete(ctx) {
        const response = await super.delete(ctx)
        const { data, meta } = response ?? {}
        if (data == null) {
          return response
        }
        const v3Data = toV3Data(data, ctx.query)
        return {
          data: v3Data,
          meta: meta
        }
      }
    }),
 }

/**
 * strapi v4のレスポンスをv3の形に変換する
 */
const toV3Data = (data, query) => {
// .. 略
}

findOneのif文に関しましては、参考にさせていただいている記事のカウントの追加部分になります。