Nuxtのバージョンを3.17以上にアップグレードする際はAPI周りの仕様変更に気をつけろ (Consistent Data Across Components)

概要

弊社公式サイトのNuxtのバージョンを脆弱性対応のために3.16.2から3.19.0にアップグレードしたらAPIからのフェッチをしている部分でエラーにはならないが、何も表示されない現象が発生した。

原因

結論から言うと、Nuxt 3.17で追加された"Consistent Data Across Components"という仕組みが原因で本事象が発生していた。

これはどういう仕組みかというと、useAsyncDataかuseFetchを使う際に同じキーを与えられた場合、refを共有するようになり、アプリケーション全体でデータの一貫性が担保されるようになるものである。

問題が発生した実装

複数のuseFetchでキーを指定しない実装をしていた。
（下記のような実装が複数あった）

export const fetchNewsContents = () => {
  return useFetch('/api/blog', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
    })
  })
}

これだと無名のキーが同じキーとして扱われてしまい、たとえば/api/getBlogと/api/getNewsが同じデータであると認識されてしまい、不整合が起きていた。

改善

キーを入れよう

export const fetchNewsContents = () => {
  return useFetch('/api/blog', {
    key: 'blog'
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
    })
  })
}