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?

TanStack•3y ago•

6 replies

ordinary-sapphire

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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads