Zenn
Closed2

Next.jsでuseSWRInfiniteを複数箇所で使うとdataが共通のものになっちゃった時のメモ

Next.js
Node.js
SWR
ひいらぎのぞみひいらぎのぞみ

ども
こういうメモ系はスクラップか記事かどちらに書けばいいのか悩むこの頃です。

さて、useSWRInfiniteを2箇所で使っていて、nextのuseRouterのルーターで行き来をした時、dataの中身が最初に開いていたデータから変わらない現象に落ちました。

page1.tsx
...
  const { data, error, isLoading, isValidating, setSize } = useSWRInfinite<T[]>(
...
  // こちらのページを先に開けば意図どおりの値がdataに入ります。
...
page2.tsx
...
  const { data, error, isLoading, isValidating, setSize } = useSWRInfinite<T[]>(
...
  // その後別のページに遷移しますと、dataの中身がpage1のまま入りっぱなしでした。
...

これまた聞ける人も居ないので一人でぐるぐるしてたところ、なんとか解決策を見つけました。
useSWRInfiniteに渡すフェッチャーを直書きしないことです。

page1.tsx
...
  const { data, error, isLoading, isValidating, setSize } = useSWRInfinite<T[]>(
    getKey,
    // ↓これダメみたい
    (key) => {
      return fetch(key)
    },
...
page2.tsx
...
  // 変数に入れるといいみたい
  const fetcher: BareFetcher<T[]> = (key) => {
    return fetch(key)
  }
  const { data, error, isLoading, isValidating, setSize } = useSWRInfinite<T[]>(
    getKey,
    fetcher, // ←
...

中のコード読んでないんですけど、おなじオブジェクト判定とかされてたりするんすかね。
とりあえずなんとかなってよかったです。

ひいらぎのぞみひいらぎのぞみ

いま確認したらまた再発してました。
getKeyで返す値に各ページでユニークな値を仕込んだらOKになりました。

page1.tsx
...
  const getKey: SWRInfiniteKeyLoader = (_, p) => {
    ...
    const params: { key: stirng, ...} = { key: "page1" } // こんなかんじ
    ...
    return params
  }
  const { data, error, isLoading, isValidating, setSize } = useSWRInfinite<T[]>(
    getKey,
    fetcher.
...

fetcherじゃないのかな

こうやって後で書き足すことあるしスクラップに書いていこうかな。

このスクラップは2023/01/10にクローズされました