【Nuxt3】useFetchでリアクティブな値が更新されない

問題

useFetch内で使用してるリアクティブな値が更新されん……とここ数日悩んでいましたが解決しました。おそらく慣れている人には当たり前の話だと思うのですが、一応備忘録として残します。

例

const { authKey } = useAuth(); // authKeyの型はRef<string | null>

const { data } = useFetch("/api/hoge", {
  method: "GET",
  headers: {
    authorization: `Bearer ${authKey.value}`,
  },
  watch: [authKey],
});

useAuthから認証用のキーを取得して、それをヘッダに与えています。watchも設定したし、準備万端!　と思いきや、authkey.valueの値がnullのまま更新されません。

問題点その 1

ずばり、最初の問題点はBearer ${authKey.value}の部分です。これはテンプレートリテラルですが、テンプレートリテラル自体はリアクティブではなくただの文字列なので、はじめに代入したauthKey.valueの値で固定されてしまいます。

したがって、この部分をcomputedに置き換えます。

const { authKey } = useAuth(); // authKeyの型はRef<string | null>

const authorization = computed(() => `Bearer ${authKey.value}`);

const { data } = useFetch("/api/hoge", {
  method: "GET",
  headers: {
    authorization: authorization.value,
  },
  watch: [authKey],
});

イイ感じですね！

問題点その 2

イイ感じなわけがありません。

まだ大きな見落としをしています。

ずばり、

headers: {
    authorization: authorization.value,
  }

の部分です。

Bearer ${authKey.value}がダメなら、これもダメなのです。

したがって、headersもcomputedにしましょう。

const { authKey } = useAuth(); // authKeyの型はRef<string | null>

const authorization = computed(() => `Bearer ${authKey.value}`);

const headers = computed(() => ({
  authorization: authorization.value,
}));

const { data } = useFetch('/api/hoge', {
  method: 'GET',
  headers,
  watch: [authKey],
});

headersはHeadersInitもRef<HeadersInit | undefined>も受け入れてくれるようなのでheaders: headers.valueと書く必要はないみたいです。

イイ感じですね！

おわりに

これでホントにイイ感じであって欲しい。