Nuxt3のuseFetchで動的なURLを指定する方法

はじめに

先日、Nuxt3のuseFetchを使ってデータ取得処理を実装していました。useFetch()の引数に動的なURLを渡したかったのですが、たったこれだけのことがなかなか上手くいきませんでした。今回は上手く動作した・動作しなかったパターンをご紹介します。

前提条件

・Nuxt3を使用しています
・APIのURLは/api/user/${userId}とします

上手く動作したパターン

以下のパターンではuserIdの値が更新される度に/api/user/1、/api/user/2...とfetch処理が実行されます。

await useFetch(() => `/api/user/${userId}`);

上手く動作しなかったパターン

以下のパターンはどちらも動的なURLを指定することができませんでした。userIdの初期値が0の場合は、userIdが更新される度に/api/user/0のfetch処理が実行されます。

// 失敗したパターン1
await useFetch(`/api/user/${userId}`);

// 失敗したパターン2
const url = `/api/user/${userId}`;
await useFetch(() => url);

余談

useFetch()を使用する際にパスパラメータで書く必要がなければ以下の方法でも上手く動作します（クエリパラメータを使用）。状況に応じて使い分けていただければと思います。

await useFetch('/api/user', {
    user_id: userId,
});