vicious-gold

useEffect on cache invalidation?

Hello, Is it possible to use the queryClient to detect a specific cache being invalidated. I have something like this in mind. Sorry If this is a bad question. I have spent a lot of time looking but cannot find the solution.

    const cacheStatus = queryClient.getQueryState(["chacheName"]);

    useEffect(() => {
        if(cacheStatus === "invalidated") {
            do something
        }

    },[cacheStatus])

    const cacheStatus = queryClient.getQueryState(["chacheName"]);

    useEffect(() => {
        if(cacheStatus === "invalidated") {
            do something
        }

    },[cacheStatus])

4 Replies

rising-crimson•3y ago

hi, can you maybe ask the question in a way that describes your use-case rather than asking for a niche problem solution. I think if I understood the problem, we might come to a completely different solution

vicious-goldOP•3y ago

Thanks, TkDodo. Yes certainly. I am building a self-contained component with an API call triggered when its cache gets invalided (from a component). The issue I'm having is that it needs to poll the API every few seconds until the data is returned completed. So my current solution looks something like this. There is a little more nuance but this is the basic premise.

GetDataHook

const result = useQuery(
        ["scans"],
        () => axios.get(`apicall`),
        {
            refetchInterval: 2 * 1000,
            enabled: enableFetch
        }
    );

    
return result;
=====================
SelfContainedComponent

const [shouldPoll, setShouldPoll] = useState(false)

const getData = useGetData(shouldPoll, ...otherProps) // Hook that uses React Query. 

 const cacheStatus = queryClient.getQueryState(["chacheName"]);

    useEffect(() => {
        if(cacheStatus === "invalidated") {
            setShouldPoll(true)
        }

   },[cacheStatus])

  useEffect(() => {
        if(getData.isSuccess) {
            if(data is complete) {
                setShouldPoll(false)
            } else {
                keepPolling
             }
        }
   },[getData])



<Table data={getData.data}/>

GetDataHook

const result = useQuery(
        ["scans"],
        () => axios.get(`apicall`),
        {
            refetchInterval: 2 * 1000,
            enabled: enableFetch
        }
    );

    
return result;
=====================
SelfContainedComponent

const [shouldPoll, setShouldPoll] = useState(false)

const getData = useGetData(shouldPoll, ...otherProps) // Hook that uses React Query. 

 const cacheStatus = queryClient.getQueryState(["chacheName"]);

    useEffect(() => {
        if(cacheStatus === "invalidated") {
            setShouldPoll(true)
        }

   },[cacheStatus])

  useEffect(() => {
        if(getData.isSuccess) {
            if(data is complete) {
                setShouldPoll(false)
            } else {
                keepPolling
             }
        }
   },[getData])



<Table data={getData.data}/>

So my main issue is that I want to set shouldPoll to true when chacheName is invalided from an external component

rising-crimson•3y ago

refetchInterval can take a function as an argument to do this

refetchInterval: (data) => return if you want to poll depending on data; return false to not poll

refetchInterval: (data) => return if you want to poll depending on data; return false to not poll

vicious-goldOP•3y ago

🫢 That makes too much sense! Thanks!

Gaming

Programming

useEffect on cache invalidation?

Did you find this page helpful?