TanStack•3y ago•

6 replies

uncertain-scarlet

Suggestions on dynamic refetchInterval adjustment

I'm aware of the fact that

refetchInterval

refetchInterval

takes a function to allow it to be adjusted, which is great. I'm wondering what the suggested/ideal approach is for the following scenario:

What I'd like to achieve is to be able to trigger a more rapid refetch after a job is triggered by a button push, and then fall back to a more relaxed schedule once all the tasks associated with that job are complete. The idea here being that the UI should be more reactive when a job is ongoing, but in the interest of performance should slow down if nothing is happening.

The issue I'm encountering is that because I'd like to use a more relaxed interval as my default (30 seconds), it takes a long time to trigger the recalculation to switch over to the more rapid interval (5 seconds). I'd like the switch to be instantaneous.

I've tried using

queryClient.invalidateQueries

queryClient.invalidateQueries

and

queryClient.refetchQueries

queryClient.refetchQueries

combined with the

refetchIntervals

refetchIntervals

function at the point that the button push occurs to try to immediately trigger a refetch and recalculate the interval as a result but I'm not getting the desired effect.

The API call that triggers the jobs resolves immediately, but the jobs may take some indeterminate amount of time to run, so I have to monitor the results of queries to determine when everything has finished.

Here is what I have so far:

  function useProjectQuery() {
    return useQuery({
        queryKey: ['rootItem', 'project'],
        queryFn: async () => {
          let fetchedProject = await getProject();
          fetchedProject = JSON.parse(fetchedProject);
          return fetchedProject;
        },
        refetchInterval: data => ((data != undefined && data.status === "finished") ? 5000 : 30000)
      });
  }

  function useProjectQuery() {
    return useQuery({
        queryKey: ['rootItem', 'project'],
        queryFn: async () => {
          let fetchedProject = await getProject();
          fetchedProject = JSON.parse(fetchedProject);
          return fetchedProject;
        },
        refetchInterval: data => ((data != undefined && data.status === "finished") ? 5000 : 30000)
      });
  }

I've also tried accomplishing this using state, by storing the

refetchInterval

refetchInterval

in state and passing it to the hook; but although I can observe that the initial state is passed to the hook/query successfully, updates to the

refetchInterval

refetchInterval

state using

setRefetchInterval

setRefetchInterval

on button press appear to have no effect. I have also tried using state to set a custom

useEffect

useEffect

useRef

useRef

useInterval

useInterval

hook that monitors whether jobs are running and sets the interval accordingly. No luck there either.

Any ideas or observations on how to accomplish this would be appreciated. Thank you.

TanStack•3y ago•

6 replies

uncertain-scarlet

Suggestions on dynamic refetchInterval adjustment

I'm aware of the fact that

refetchInterval

refetchInterval

queryClient.invalidateQueries

queryClient.invalidateQueries

and

queryClient.refetchQueries

queryClient.refetchQueries

combined with the

refetchIntervals

refetchIntervals

  function useProjectQuery() {
    return useQuery({
        queryKey: ['rootItem', 'project'],
        queryFn: async () => {
          let fetchedProject = await getProject();
          fetchedProject = JSON.parse(fetchedProject);
          return fetchedProject;
        },
        refetchInterval: data => ((data != undefined && data.status === "finished") ? 5000 : 30000)
      });
  }

  function useProjectQuery() {
    return useQuery({
        queryKey: ['rootItem', 'project'],
        queryFn: async () => {
          let fetchedProject = await getProject();
          fetchedProject = JSON.parse(fetchedProject);
          return fetchedProject;
        },
        refetchInterval: data => ((data != undefined && data.status === "finished") ? 5000 : 30000)
      });
  }

I've also tried accomplishing this using state, by storing the

refetchInterval

refetchInterval

in state and passing it to the hook; but although I can observe that the initial state is passed to the hook/query successfully, updates to the

refetchInterval

refetchInterval

state using

setRefetchInterval

setRefetchInterval

on button press appear to have no effect. I have also tried using state to set a custom

useEffect

useEffect

useRef

useRef

useInterval

useInterval

hook that monitors whether jobs are running and sets the interval accordingly. No luck there either.

Any ideas or observations on how to accomplish this would be appreciated. Thank you.

Suggestions on dynamic refetchInterval adjustment

Suggestions on dynamic refetchInterval adjustment

Similar Threads

Similar Threads

Similar Threads