TanStackT
TanStack•3y ago•
4 replies
rubber-blue

How to use react-intersection-observer with useQuery?

I don't want to fire 
useQuery
 until the container is in view. Here is the code I have written:
import {useInView} from "react-intersection-observer";
//other code
const {ref: inViewRef, inView} = useInView({triggerOnce: true});

const {data, refetch, isLoading, isError} = useQuery(
    [RQConstants.GET_PRIVATE_FILE_BYTES, fileUrl],
    async () => {
      const {data} = await axios.get(URN_MEDIA + "/file?uri=" + fileUrl);
      return data;
    },
    {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      staleTime: "Infinity",
      cacheTime: "Infinity",
      enabled: inView,
    }
  );

But this gets execute whenever the component is re-mounted and the container is in view. Which is obvious because the inView changes from false to true, which in result override the staleTime and cacheTime configurations.
I don't want these axios calls to hit if they have data in cache?
Any suggestions please. Thanks.
Was this page helpful?