React Query keeps fetching despite keepPreviousData

Question

I have an API call that returns an image:

const [previewImg, setPreviewImg] = useState(1);

  const getImage = async (key) => {
    const { data } = await axios({
      method: 'get',
      url: `imageUrl/${key}/'name'`,
      responseType: 'blob',
    });
    return URL.createObjectURL(data);
  };

  const { data } = useQuery(
    ['image', previewImg],
    () => getSignatureImage(previewImg),
    {
      keepPreviousData: true,
    }
  );


return (
      <button onClick={() => setPreviewImg(previewImg + 1)}>
        MORE
      </button>
      <button onClick={() => setPreviewImg(previewImg - 1)}>
        LESS
      </button>
)

However, once I go back to a previous number, there is a refetch, whereas I'd expect it to use the cached data, especially based on the default options:

defaultOptions: {
    queries: {
      staleTime: 'Infinity',
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },

Does it have to do with it returning an image url made from a blob?

Answer 1

The staleTime option should be Infinity not 'Infinity':

staleTime: Infinity,

Infinity is a global value, not some configuration string for RQ.