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リクエストがスルーされる事象が発生しました。

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')

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

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

• useAsyncDataのオプション
• useFetchのオプション

解決したgif

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