Nuxt3 の useFetch を勉強する

Overview

Nuxt3 の useFetch API を実際に使ってみたので使った範囲での機能についてまとめます。

useFetch の詳細は以下の Nuxt3 のドキュメントに書いてある通りです。

v3.nuxtjs.org

ざっくりいうと Fetch と Data Sync を同時に行ってくれます。

Refreshing Data

概要は以下の公式のドキュメントの Refreshing Data に書いてある通りです。

v3.nuxtjs.org

ある reactive な state を URL の parameter に指定して、その state を useFetch API 側で解釈してクエリパラメータに指定する、といった時に使います。

実際に使用するユースケースとしては「フィルタ機能」などになると思います。

例えば、ある条件下でフィルタリングされたリストがある（特定の年齢以上のユーザーの一覧を出したい等）場合、フィルタリング条件を reactive な stage に登録しておくとドキュメントに書いてあるように useFetch を呼び出しを関数にすることで UI 側で指定した条件で変化させるたびに UseFetch API が Call されて Data の Refreshing が自動で行われます。

<script setup>
const age = ref(1); // age を UI 上で参照し、変化させるたびに useFetch API が Call される。

const { data: users, pending, refresh, error } = await useFetch(() => `users?age>${age.value`, { baseURL: config.API_BASE_URL }
);

</html>

Pending

useFetch API の第二返り値に指定されている値で、useFetch API が Call されたときに 「Call中かどうか(=要は HTTP リクエストが完了したかどうか）」を判定します。

これにより、ある stage に対してHTTP のリクエストが完了したら更新する、といった処理を簡単に書くことができます。

個人的には Nuxt3 を使い始めて一番便利だなと思った Feature でした。

SearchParams

20220829 時点ではまだ正式なドキュメントがないですが、useFetch で Call する endpoint に対してクエリパラメータを設定できるようにする option です。

ドキュメントでは https://v3.nuxtjs.org/api/composables/use-fetch/#type に記載されており、Description にも Query params と記載があります。

型としては以下になるので Go でいうところの map[string]any と同値で文字列で key を指定して値はなんでも当てはめることができます。

interface SearchParams {
    [key: string]: any;
}

まとめ

実際に仕事で使ってみた機能をベースにまとめてみました。ドキュメントの読み方を教えてもらえたので、もう少し useFetch API に一人でも慣れていけそうな気がしました。