T
TanStack•11mo ago
deep-jade

Tracking ongoing refetch attempts in useQueries' refetchInterval

Hey everyone! I have a function inside useQueries's refetchInterval that refetches a query up to three times based on certain conditions. 
return useQueries({
  queries: assetIds.map((assetId) => ({
    queryKey: inspectionQueryKey.photoStatus(assetId),
    queryFn: () => getPhotoUploadStatus<Api.AssetUploadStatus>({ queryParams: `/${assetId}/status` }),
    retry: PHOTO_UPLOAD_RETRY_COUNT,
    retryDelay: (attempt: number) => attempt * 1000,
    refetchInterval: ({ state }: Query<Api.AssetUploadStatus>) =>
      state.dataUpdateCount <= PHOTO_UPLOAD_RETRY_COUNT && !state.data?.processed
        ? 1000 * state.dataUpdateCount
        : false,
    staleTime: Infinity,
    enabled: photoInfoMutationStatus === "success" && photoUploadMutationStatus === "success" && !!assetId,
  })),
});
return useQueries({
  queries: assetIds.map((assetId) => ({
    queryKey: inspectionQueryKey.photoStatus(assetId),
    queryFn: () => getPhotoUploadStatus<Api.AssetUploadStatus>({ queryParams: `/${assetId}/status` }),
    retry: PHOTO_UPLOAD_RETRY_COUNT,
    retryDelay: (attempt: number) => attempt * 1000,
    refetchInterval: ({ state }: Query<Api.AssetUploadStatus>) =>
      state.dataUpdateCount <= PHOTO_UPLOAD_RETRY_COUNT && !state.data?.processed
        ? 1000 * state.dataUpdateCount
        : false,
    staleTime: Infinity,
    enabled: photoInfoMutationStatus === "success" && photoUploadMutationStatus === "success" && !!assetId,
  })),
});
Until all the refetch attempts are done, I need to keep showing a spinner. From what I’ve checked, when refetchInterval runs, isFetching is true, and if it succeeds, isSuccess is also true. But between refetch attempts, the query goes into an idle state, so I can’t rely on any flag to track ongoing attempts. Is there a way to detect if the query still has remaining refetchInterval attempts so I can use that to show the spinner? Thanks in advance!
3 Replies
deep-jade
deep-jadeOP•11mo ago
One of the decisions is to track refetchInterval with ref: 
refetchInterval: ({ state }: Query<Api.AssetUploadStatus>) => {
  const shouldContinueRefetching = !state.data?.processed;

  if (shouldContinueRefetching) {
    refetchingRef.current = true;
    return 1000 * state.dataUpdateCount;
  } else {
    refetchingRef.current = false;
    return false;
  }
}
refetchInterval: ({ state }: Query<Api.AssetUploadStatus>) => {
  const shouldContinueRefetching = !state.data?.processed;

  if (shouldContinueRefetching) {
    refetchingRef.current = true;
    return 1000 * state.dataUpdateCount;
  } else {
    refetchingRef.current = false;
    return false;
  }
}
fascinating-indigo
fascinating-indigo•11mo ago
Is there a way to detect if the query still has remaining refetchInterval attempts
no because retry can be also be a dynamic function so it' s unknown how often there will be a retry until that function is executed
the query goes into an idle state
which version are you using? There is no idle state anymore in v5. also, retry and refetchInterval are different things. retry is for errors, the interval is for re-fetching once the query is successful. I feel like you're mixing things here
deep-jade
deep-jadeOP•11mo ago
Hi @TkDodo 🔮, thanks for your reply, and sorry for the confusion. Regarding idle: I mistakenly mixed up status with fetchStatus. In the described scenario, the query's status is pending. And yes, I was referring to the state of refetchInterval, not retry. However, as I understand it, there’s no built-in way to track upcoming executions of refetchInterval. I solved this using a ref, which does exactly what I needed. Thank you again for this great tool! 🙂

Did you find this page helpful?