前言：

lib\reviews.js 裡面的 getReview getReviews 兩隻函式有很多重複的地方
另外寫一隻函數來取代，重複的地方有兩個，拆成兩隻函數(如下圖所示)

前略

// 導入 CMS 後 改寫的函式 getReview  重構
export async function getReview(slug) {
    const { data } = await fetchReviews({
        filters: { slug: { $eq: slug } },
        fields: ["slug", "title", "subtitle", "publishedAt", "body"],
        populate: { image: { fields: ["url"] } },
        pagination: { pageSize: 1, withCount: false },
    });
    const item = data[0];
    return {
        ...toReview(item),
        body: marked(item.attributes.body, { headIds: false, mangle: false }),
    };
}

// 導入 CMS 後 改寫的函式 getReviews 重構
export async function getReviews() {
    const { data } = await fetchReviews({
        fields: ["slug", "title", "subtitle", "publishedAt"],
        populate: { image: { fields: ["url"] } },
        sort: ["publishedAt:desc"],
        pagination: { pageSize: 6 },
    });

    return data.map(toReview);
}


// 拆成兩隻獨立的函數 如下
// 重構

async function fetchReviews(parameters) {
    const url =
        `${CMD_URL}/api/reviews` +
        "?" +
        qs.stringify(parameters, { encodeValuesOnly: true });
    console.log("fetchReviews =", url);
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`CMS return ${response.status} for ${url}`);
    }
    return await response.json();
}

// 重構 2

function toReview(item) {
    const { attributes } = item;
    return {
        slug: attributes.slug,
        title: attributes.title,
        date: attributes.publishedAt.slice(0, "yyy-mm-dd".length),
        image: CMD_URL + attributes.image.data.attributes.url,
    };
}

最後一個部分

原本的 getSlugs()

export async function getSlugs() {
  const files = await readdir('./content/reviews');
  return files.filter((file) => file.endsWith('.md'))
    .map((file) => file.slice(0, -'.md'.length));

後來改寫的

export async function getSlugs() {
    const { data } = await fetchReviews({
        fields: ["slug"],
        sort: ["publishedAt:desc"],
        pagination: { pageSize: 100 },
    });

    return data.map((item) => item.attributes.slug);
}

以上就把原本在本地端讀取的資料，全部改成Strapi後端的資料

大叔的鐵人賽第二十五天結束 :)