事象

以下のような外部webサイトの情報をまとめたカードを複数作成するために、SWRを使用して、APIに渡したURLのOGP情報を取得するような処理を書いていました。しかし、mapメソッドで繰り返し作成したコンポーネントごとに渡したurlは異なるはずなのに、作成されるカード(SWRで取得したデータ)が全て同じになりました。

原因

おそらく、SWRに渡す値を変えず、切り出したfecherに直接取得したいURLのパラーメータを渡してしまっていた結果、fetcherの中の値は異なるにも関わらず、SWR側では同じリクエストと判断してしまったため、キャッシュ(?)を使用して、同じデータが返ってきてしまったと思われます。

対処

fetcherに与えていたurlのパラメータを、SWRの引数として渡した結果、うまくいきました。

実際のコード

export const useURLData = (url: string) => {
-  const fetcher = async (apiURL: string) => {
+  const fetcher = async (apiURL: string, url: string) => {
-    const res = await axios.get(apiURL, { params: { url: url } });
+    const res = await axios.get(apiURL, { params: { url } });
    return res.data;
  };
- const { data, error } = useSWR('http://localhost:9000/api/ogp', fetcher);
+ const { data, error } = useSWR(['http://localhost:9000/api/ogp', url], fetcher);
  return {
    urlData: data,
    isLoading: !error && !data,
    isError: error,
  };
};

【参考にした記事】