useFetchで画像アップロードがキャッシュされる

はじめに

• ファイルをコピー&ペーストしてファイルアップロードした際に2枚目でペーストした画像が1枚目の画像としてアップロードされてしまう
• 上記事象が発生したのでそれの原因と回避策を書き残します

環境

• Nuxt 3

問題

• 起きた事象としては、ファイルをコピー&ペーストでアップロードする機能を実装した際に、2枚目の画像をペーストした際に1枚目コピーした画像がアップロードされてしまうバグに遭遇しました

原因

デバッグした所、コピーしたデータまでは一緒でアップロードする際に1枚目のファイルデータをリクエストしており、useFetch()のキャッシュが働いている可能性がありました

• useFetch()はキャッシュキーを計算する際に、bodyの中身がFormDataの場合はファイル名のみを計算に含めています
• 画像などをコピーした際にファイル名が、image.pngになるので（これ知らなかった）2枚目で生成したキャッシュキーが1枚目のデータにヒットしてしまうため1枚目の画像データがアップロードされる事象が発生していました

generateOptionSegments(opts)にて、FormDataの場合はファイル名をキャッシュキーの計算に含むようにしている

generateOptionSegments(opts)内部の実装

回避策

• 回避策としてはそもそもuseFetch()を使用せずに、$fetchを使用する
• コピーした際、ファイル名にnew Date().nowやuuidを付与するなどキャッシュキーが重複しないようにする
• 自分の対応としては、useFetch()を$fetchに修正するのは影響範囲が広かったため暫定対応としてファイル名の一意性を担保するようにしたら解決しました

おわりに

• useFetch()の使い所みたいなのを理解していないとキャッシュにハマるなと（実際ハマった）感じました