harsh-harlequin

Is it possible to stop a query refetch based on query data?

I want to implement a polling function that polls a video's transcript every second while it's processing so that it "immediately" updates the UI when it's ready. This is what I have so far:

  const transcriptQuery = useQuery({
    queryKey: ["transcript", selectedAsset?.asset.transcription.id],
    queryFn: async () => {
      const response = await fetch(
        `/api/transcripts/${selectedAsset?.asset.transcription.id}`
      )
      const data: Transcription = await response.json()
      return data
    },
    refetchInterval: 1000, // Fetch every second
    initialData: selectedAsset?.asset.transcription,
  })

  const transcriptQuery = useQuery({
    queryKey: ["transcript", selectedAsset?.asset.transcription.id],
    queryFn: async () => {
      const response = await fetch(
        `/api/transcripts/${selectedAsset?.asset.transcription.id}`
      )
      const data: Transcription = await response.json()
      return data
    },
    refetchInterval: 1000, // Fetch every second
    initialData: selectedAsset?.asset.transcription,
  })

However I'd like the query to stop refetching when transcriptQuery.data.status === "READY" because at that point there will be no further updates. How can I do that?

4 Replies

metropolitan-bronze•3y ago

I think this is what you're looking for: https://tanstack.com/query/latest/docs/react/guides/disabling-queries

Disabling/Pausing Queries | TanStack Query Docs

If you ever want to disable a query from automatically running, you can use the enabled = false option. When enabled is false:

harsh-harlequinOP•3y ago

@troywoy this works except I can't use data within the query to define the expression

  const [transcriptQueryEnabled, setTranscriptQueryEnabled] = useState(
    selectedAsset?.asset.transcription.status == TranscriptionStatus.READY
  )

  const transcriptQuery = useQuery({
    queryKey: ["transcript", selectedAsset?.asset.transcription.id],
    queryFn: async () => {
      const response = await fetch(
        `/api/transcripts/${selectedAsset?.asset.transcription.id}`
      )
      const data: Transcription = await response.json()
      return data
    },
    refetchInterval: 1000, // Fetch every second
    initialData: selectedAsset?.asset.transcription,
    enabled: transcriptQueryEnabled,
  })

  useEffect(() => {
    if (transcriptQuery.data.status == TranscriptionStatus.READY) {
      setTranscriptQueryEnabled(false)
    }
  }, [transcriptQuery.data])

  const [transcriptQueryEnabled, setTranscriptQueryEnabled] = useState(
    selectedAsset?.asset.transcription.status == TranscriptionStatus.READY
  )

  const transcriptQuery = useQuery({
    queryKey: ["transcript", selectedAsset?.asset.transcription.id],
    queryFn: async () => {
      const response = await fetch(
        `/api/transcripts/${selectedAsset?.asset.transcription.id}`
      )
      const data: Transcription = await response.json()
      return data
    },
    refetchInterval: 1000, // Fetch every second
    initialData: selectedAsset?.asset.transcription,
    enabled: transcriptQueryEnabled,
  })

  useEffect(() => {
    if (transcriptQuery.data.status == TranscriptionStatus.READY) {
      setTranscriptQueryEnabled(false)
    }
  }, [transcriptQuery.data])

I guess I just have state outside of it do it?

metropolitan-bronze•3y ago

That sounds viable but tbh I'm still learning myself, hopefully someone else can chime in to teach us both

xenial-black•3y ago

refetchInterval takes a function that receives the latest data for this use case

Gaming

Programming

Is it possible to stop a query refetch based on query data?

Did you find this page helpful?