Unable to get latest data on refetch

[baymac]

Hook

I have a hook setup as:

import { jobStatus } from './../utils/QueryApis';
import { JobStatusItemRequestParams } from './../utils/RequestTypes';
import { useQuery } from "react-query";

export default function useStatus(jobStatusItemRequestParams: JobStatusItemRequestParams) {
  return useQuery(['status', jobStatusItemRequestParams], jobStatus, { refetchOnWindowFocus: false });
}

I need to poll an endpoint until an expected result. More specifically I am trying to poll the state of a job run. So the job run states are WAITING_TO_RUN, RUN_START, RUN_SUCCESS... COMPLETE_EXPORT_SUCCESS.

Method 1

I have a poll refresh function defined (let's assume it keeps executing after every 5 second).

const id = 'some_id'
const { status, data, error, isFetching } = useStatus('status', { data_item_id: id })
pollRefresh() { // assume it keeps polling every 5 second
  queryCache.refetchQueries(['status', {data_item_id: id}])
  console.log(data);
}

I am expecting the data should be updated but it is not. It is the old data.

Method 2

I tried converting this to a mutation:

const id = 'some_id'
const [useStatusMutation, { data: statusData }] = useMutation(jobStatus);
pollRefresh() { // assume it keeps polling every 5 second
  const { response } = await useStatusMutation({ data_item_external_id: id });
  console.log(response); // Gives the latest output
  console.log(statusData); // Outputs undefined
}

The problem here is that if I want to reuse the response somewhere in the component then I have to set it in the state (which I do not want to so using hooks).

[denisborovikov]

Have you tried force option?

From the doc

By default, queries that are fresh (not stale) will not be refetched, but you can override this by passing the force: true option.

[baymac]

The query in my case is set stale by default config so staleTime is 0. So force option isn't changing what is already happening. In the networks tab, I can see that remote calls are being made, the response received by the call is correct.

I do not know why but hook data is not getting updated unless component is mounted again. For example, if I refresh the screen then that data gets updated but again never changes while the component is mounted. Suppose during mount if the state was WAITING_TO_RUN it stays that way even after queryCache.refetchQueries() is hit every 5 secs.

[baymac]

Another point I would like to mention is that with onSuccess methods for both useQuery and Mutation, I get the latest data.

Query

export default function useStatus(key: string, jobStatusItemRequestParams: JobStatusItemRequestParams) {
  return useQuery(`${key}`, [jobStatusItemRequestParams], jobStatus, {
    refetchOnWindowFocus: false,
    onSuccess: (data: any) => { console.log(data) } 
  });
}

Mutation

 const [useStatusMutation, { data: statusData }] = useMutation(jobStatus2, {
        onSuccess: (data: any) => { console.log(data) }
    });

But again I want the data variable to be updated as I need to reuse in the component itself and would like to use it as a substitute of state. Is it possible?

[baymac]

One workaround to get latest data in the component is using this method:

const getCachedItemStatus = (): DataItemStatus => { // Hack Alert
  return (queryCache.getQueries([`status`])[0].state as any).data
}

So now if I do:

pollRefresh() {
  queryCache.refetchQueries(['status', {data_item_id: id}])
  console.log(getCachedItemStatus()) 
}

I get undefined in the first poll thereafter I get the latest data. Well is there a way to get around this undefined issue and why is it happening? Thanks, I would not spam more.

[cherniavskii]

const id = 'some_id'
const { status, data, error, isFetching } = useStatus('status', { data_item_id: id })
pollRefresh() { // assume it keeps polling every 5 second
 queryCache.refetchQueries(['status', {data_item_id: id}])
  console.log(data);
}

I am expecting the data should be updated but it is not. It is the old data.

You're performing an async action, so you won't get new data immediately.

So your use case is to refetch query with some interval until specific response is returned, right?

[cherniavskii]

If so - it's pretty easy to implement thanks to useQuery refetchInterval option - here's a working example https://codesandbox.io/s/kind-goodall-ew2yu?file=/src/App.js

[baymac]

@cherniavskii Thank you so much I was able to fix my issue with useEffect and refetchInterval. :)