🍩

Nuxt3のuseFetchのkeyオプション

西畑一馬

2024/01/24に公開

Nuxt3のuseFetchではkeyオプションが提供されています。

keyオプションの説明を読むと以下のようになっており

a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be automatically generated based on URL and fetch options

google翻訳をすると以下の和訳になります。

データのフェッチがリクエスト間で適切に重複排除できることを保証するための一意のキー。指定されていない場合は、URL とフェッチオプションに基づいて自動的に生成されます。

これはTanStack Queryなどのように、key指定を行うとすでにAPIアクセスを行いキャッシュがある場合はオリジンアクセスを行わずにキャッシュを返してくれるものではなく、キャッシュや最新のレスポンスを共有する処理のキーに利用します。

server/api/time.ts というログ出力と時間を返すだけのAPIを用意して

export default defineEventHandler((event) => {
  const time = new Date()
  console.log(time)
  return {
    time
  }
})

useFetchにkey指定を行い以下のページにアクセスすると

<template>
 <pre>{{ data1.time }}</pre>
 <pre>{{ data2.time }}</pre>
 <pre>{{ data3.time }}</pre>
 <pre>{{ data4.time }}</pre>
</template>

<script setup>
const { data: data1 } = await useFetch('/api/time',{
  key:"xxxx"
})
const { data: data2 } = await useFetch('/api/time',{
  key:"xxxx"
})
const { data: data3 } = await useFetch('/api/time',{
  key:"xxxx"
})
const { data: data4 } = await useFetch('/api/time',{
  key:"xxxx"
})
</script>

APIのログにはリクエスト回数分だけのログが出力されています。

2024-01-23T14:55:17.588Z
2024-01-23T14:55:17.589Z
2024-01-23T14:55:17.591Z
2024-01-23T14:55:17.591Z

ただ、ブラウザで表示を確認すると以下のようになっており、すべての値が最新のAPIの返却値になりました。

2024-01-23T14:55:17.591Z
2024-01-23T14:55:17.591Z
2024-01-23T14:55:17.591Z
2024-01-23T14:55:17.591Z

key指定を行うと、同一キーの最新リクエストが発生した場合に既存のレスポンスデータにも最新の値が反映されます。

getCachedDataで利用

Nuxt3.8でgetCachedDataというオリジンアクセスを制御するkeyオプションの利用方法が追加されましたので、興味がある方は以下の記事を参考にしてください。

株式会社トゥーアールPublication

トゥーアールはフロントエンドに特化したWeb制作会社です。 ReactやNext.jsなどのJavaScriptフレームワークを利用したフロントエンド開発についてお気軽にご相談ください。

getCachedDataで利用

Discussion