Nuxt3のuseFetch()で2回目以降のapiがスルーされる問題
  • 2022.04.26に公開
  • Nuxt3
  • 0. Nuxt3
  • No.9 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

useFetch()で2回目以降のapiがスルーされる問題

useFetch()を使用して「server/api」以下にリクエストしている場合。

問題のコード(Vueファイル/setup内/カートに入れるボタンメソッド)
await useFetch(
  '/api/shopify/add-line-items',
  { method: 'POST', body }
)
  .then(({ data: cart }) => {
  	console.log('Added item!!')
    shopifyStore.updateCart(cart.value)
    emit('addedToCart')
  })

2回目以降のクリックアクションでapiリクエストがスルーされる事象が発生しました。

2022-04-17 19-05-26 (1)

1回目のカートに入れるボタンは正常に動きます。

が、2回目のクリック時はapiリクエストが無視され、いきなりthen()に処理が移っています。

await useFetch(
  '/api/shopify/add-line-items',
  { method: 'POST', body }
)
  .then(({ data: cart }) => {
  	// 2回目以降のクリックはここに処理が移る
  	console.log('Added item!!')
    shopifyStore.updateCart(cart.value)
    emit('addedToCart')
  })

キャッシュが原因。useAsyncData()を使おう

上記の問題はuseFetch()が内部で行っているキャッシュが原因で、2回目以降の処理をスルーします。

キャッシュを無効にするオプションはuseAsyncData()にしか用意されていません。

そこで、useAsyncData()のキャッシュ無効オプションを付与してuseFetch()を書き換えます。

解決したコード(最初のコードと同じapiリクエスト)
await useAsyncData('add-line-items', () =>
  $fetch(
    '/api/shopify/add-line-items',
    { method: 'POST', body }
  ),
  {
    initialCache: false
  }
)
  .then(({ data: cart }) => {
    console.log('Added item!!')
    shopifyStore.updateCart(cart.value)
    emit('addedToCart')      
})
  • initialCache ... falseに設定すると、最初のフェッチでペイロードキャッシュをスキップする。(デフォルトはtrue)

    参考: Nuxt 3 - useAsyncData

ちなみに、

useAsyncData('key', $fetch('リクエストURL'))

useFetch('リクエストURL')

は、同じことを行っています。

ただ、オプションの違いがあるので必要に応じて書き換えましょう。

解決したgif

2回目以降のクリックも、ボタンが無効になりapi処理が正しく行われています。

2022-04-17 19-23-50 (1)

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。