Nuxt3 で Data Fetching を行う

Overview

Nuxt3 で DataFetching を行う方法について記載します。

大まかには以下のドキュメントに記載されているとおりですが、一部ハマったところがあったので備忘録として追記します。

nuxt.com

ハマったところ

Data を Refresh するときには関数型で書く

ドキュメントどおりに useFetch を使用する（＝引数に API の endpoint を指定する）と refresh の callback を指定しても Data が再 Fetch されて挙動に遭遇しました。

refresh したときに再度 Data を Fetch するためには https://nuxt.com/docs/getting-started/data-fetching/#refreshing-data に書かれてるように useFetch(() => "$endpoint") という形で実装する必要があります。

理由はわかりませんが素直に実装してみたらハマったのでそのメモとして残しました。