Nuxt3の「useFetch」で一部データを取得できなかった件について

みなさんこんにちは!
イザナギです。

いや〜暑いですね...
クーラーが欠かせないです。
熱中症に気をつけないと!

さて話は変わりまして、今回はNuxt3で開発中に起こった事象について書いていきたいと思います。(2022/7/24 時点での情報です)

開発中のバージョン等の情報は以下のとおりです。

  • Operating System: Linux
  • Node Version:   v18.6.0
  • Nuxt Version:   3.0.0-rc.8
  • Package Manager: yarn@1.22.19


 

useFetchでAPIのデータを取得できない?

現在Nuxt3でブログを再構築中で、「useFetch」を使ってmicrocmsのデータを取得しようとしたら、
なぜか取得できない?
原因を調べてみたら、下記githubのisuueに載ってました。
https://github.com/nuxt/framework/issues/5993
どうやら、同一ページ内で「useFetch」を複数回使う?と、2回目以降に実施されるデータは取得できないみたいですね。
 
解決策としては、「useFetch」使っている所全て?に「initialCache」「key」パラメータを使い、
以下例のように実装してあげるといいみたいです。


import { hash } from "ohash"
const { data, pending, refresh, error } = await useFetch(() =>
    url, 
    initialCache: false,
    key: hash(['何らかの文字列','何らかの文字列']),
});

ちょっとめんどくさい作業でしたが、上記パラメータを付与してあげるとデータを取得できていました!
調査するのにも時間がかかってしまったが、まだ(執筆時点)ではNuxt3はrcで、本番リリース前だったので、良かったとしよう。
目指せ!正式リリース同時のブログリニューアル!
 
それでは今回はここまで!
また次回の記事でお会いしましょう!

■関連記事(精度そんな良くないかもwww)

■関連トピック

2022 - Izanagi's Site