Error [AxiosError]: Request failed with status code 400

はじめに

記事ブログの作成中にエラーになりました。

問題

axiosとあるので、URLの記載が間違っているかと調査していました。

page

async function FetchBlog({ params }: { params: Promise<Params> }) {
    "use cache";
    const id = await params
    const response = await axios.get<MicroCMSArticle>(
        `https://[あなたのドメイン].microcms.io/api/v1/blogs/${id}`,
        {
            headers: {
                "X-MICROCMS-API-KEY": `${process.env.MICROCMS_API_KEY}`,
            },
        }
    )
    const article = response.data;

解決方法

URLの記載方法が間違っていました。

page

async function FetchBlog({ params }: { params: Promise<Params> }) {
    "use cache";
    const id = await params
    const response = await axios.get<MicroCMSArticle>(
        `https://[あなたのドメイン].microcms.io/api/v1/blogs/${id,id}`,
        {
            headers: {
                "X-MICROCMS-API-KEY": `${process.env.MICROCMS_API_KEY}`,
            },
        }
    )
    const article = response.data;

と記載を変更しました。

オブジェクトの分解の記述が不足していたためエラーになっていました。
const { id } = await params;でも可能です。

おわりに

つぎにいきます。

参考文献