useSWR の onSuccess が実行されない

(前回の続き)

kntmr.hatenablog.com

useSWR の onSuccess でフラグを書き換える方法を書いたけど、同じパスの API を別々のところから (ほぼ) 同時に呼び出した場合、useSWR のキャッシュが効いて、後続の API 呼び出し方がスキップされて onSuccess が実行されない。

しょうがないのでダミーのクエリパラメータを付ける。

// component A
const [isCompleted, setIsCompleted] = useState(false)
const { data } = useSWR('/api/data?aaa', fetcher, {
  onSuccess: () => setIsCompleted(true)
})

// component B
const [isCompleted, setIsCompleted] = useState(false)
const { data } = useSWR('/api/data?bbb', fetcher, {
  onSuccess: () => setIsCompleted(true)
})

もしくは onSuccess をやめて useEffect を使う。

const { data } = useSWR('/api/data', fetcher)
useEffect(() => {
  if (!data) return
  setIsCompleted(true)
}, [data])

ちなみにこの useEffect の使い方が適切かどうかは自信ない...。

ja.react.dev

現場からは以上です。