why does my code need useEffect for my query key?

[Wulgaren]

Hello, i've stumbled upon a weird bug that makes images have the same image even though the links are different and they link to a different image.

heres my code

import { useQuery } from "@tanstack/react-query";
import { memo } from "react";
import { FaCompactDisc } from "react-icons/fa";
import { useInView } from "react-intersection-observer";
import LoadingAnimation from "../loading-animation/LoadingAnimation";

function SearchImage({
  url,
  title = "",
  index = 0,
  className = "object-cover w-full h-full rounded-md",
}: {
  url: string;
  title?: string;
  index?: number;
  className?: string;
}) {
  const [inViewRef, inView] = useInView({
    triggerOnce: true,
    rootMargin: "0px 0px 200px 0px",
  });

  const { data, error, isFetching } = useQuery({
    queryKey: ["ResultImage", url],
    queryFn: async () => {
      const res = await fetch(url);
      if (!res.ok) throw new Error("Error downloading image.");

      const blob = await res?.blob();
      if (blob.size <= 0) throw new Error("Error image.");

      const objectUrl = URL.createObjectURL(blob);
      return objectUrl;
    },
    retryDelay: 5000 + 100 * (index + 1),
    enabled: !!(url && inView),
  });

  if (!url || error)
    return (
      <FaCompactDisc
        size={50}
        className={`p-5 pb-12 opacity-70 ${className}`}
      />
    );

  if (isFetching) return <LoadingAnimation />;

  return (
    <>
      <img
        ref={inViewRef}
        className={`${className}`}
        src={data}
        loading="lazy"
        alt={title + " Image"}
      />
    </>
  );
}

const MemoizedSearchImage = memo(SearchImage);

export default MemoizedSearchImage;

it creates the bug, but if i add

  useEffect(() => {
    refetch();
  }, [url, refetch]);

the bug is fixed.

why? doesnt react tanstack query check if the url updates every time?

[87xie]

Unfortunately, I'm unable to reproduce your situation.

Refer to this minimal example. Each time the src in queryKey changes, it triggers the execution of queryFn and then updates.

[Wulgaren]

hello! i cant open the codepen unfortunately

[87xie]

The visibility has been updated. Could you please try it again?

[Wulgaren]

thank you very much! turns out its some error with netlify instead.