Turn off refetchInterval / toggle enabled based off returned data?

[wtanna]

Is there a way to stop the interval based off the returned response?

I'm trying to be clever with not using useState and useEffect and instead relying on react-query to handle preserving the state/effects. I am creating an entity with useMutation. Something like:

  const [generateContractMutation, { data: generatedContract, status: documentCreationStatus }] = useMutation(
    async () => {
      // ...logic to build up entity
      
      const { data: generatedContract } = await api.documents.create({
        // ...payload
      })

      return generatedContract
    },
  )

then I use that generatedContract with useQuery and refetchInterval to poll for a specific status:

  const { data: contractFromPolling } = useQuery(
    ["fetchContract", { id: generatedContract?.id }],
    async () => {
      const { data: contract } = await api.documents.find(generatedContract?.id)
      return contract
    },
    {
      initialData: { status: CONTRACT_STATUSES.GENERATING_CONTRACT },
      refetchInterval: 2000,
      enabled: isModalOpen && generatedContract?.id
    },
  )

I'd love to be able to stop the polling (have enabled be false) when contractFromPolling is a specific status, otherwise it will just go on forever (or until the user closes the modal).

A solution I do have includes using useState. I instead call the generateContractMutation function, then await for the data to be returned. I then set that data in setState

  const [generatedContract, setGeneratedContract] = useState(null)

  const handleFinish = async () => {
    setGeneratedContract({ status: CONTRACT_STATUSES.GENERATING_CONTRACT })
    showModal(true)

    const generatedContract = await generateContractMutation()
    setGeneratedContract(generatedContract)
  }

this way I can then run useQuery with the following state in the enabled:

  const { data: contractFromPolling } = useQuery(
    ["fetchContract", { id: generatedContract?.id }],
    async () => {
      const { data: contract } = await api.documents.find(generatedContract?.id)
      return contract
    },
    {
      refetchInterval: 2000,
      enabled:
        isModalOpen &&
        generatedContract?.id &&
        generatedContract?.status === CONTRACT_STATUSES.GENERATING_CONTRACT,
    },
  )

Each time the polling returns back a result I set it as the state in a useEffect

  useEffect(() => {
    setGeneratedContract(contractFromPolling)
  }, [contractFromPolling])

Since generatedContract becomes the contractFromPolling, when contractFromPolling is no longer GENERATING_CONTRACT then it will stop polling.

I imagine that the useState solution is the best outcome for now? Are there any tricks to be able to stop an interval fetching with reactQuery using the data that is returned from the corresponding useQuery? It would be awesome if there is a way where we can toggle the enabled flag through the onSuccess callback!

I made a very basic CodeSandbox showing how it's being done currently with useState and useEffect:

https://codesandbox.io/s/react-query-stop-polling-usestateuseeffect-vz4vh

and here is another showing the React Query only implementation that I'm curious on if it's possible or not:

https://codesandbox.io/s/react-query-polling-no-stateeffect-q4q52

I actually ended up doing some more tinkering and found one solution (also made the queries a tad more complex to match closer to what I am originally doing).

https://codesandbox.io/s/one-way-react-query-polling-no-stateeffect-e2hyf?file=/src/App.js

  const { data, status } = useQuery(["poll", contract?.id], fakePoll, {
    initialData: { status: "Processing" },
    refetchInterval: 2000,
    enabled: contract?.id,
    onSuccess: data => {
      if (data.status !== "Processing") {
        queryCache.removeQueries(["poll", data.id]);
        queryCache.setQueryData(["poll", data.id], data, {
          refetchInterval: false
        });
      }
    }
  });

by removing the old query first, I'm able to set a new one with the data that was originally retrieved from the first query while also turning off the interval. This seems to work great for my use case, but I'm not 100% sure if this is ideal or not.

[wolverineks]

try something like this
if refetchInterval is falsey, then refetchInterval is disabled

const [refetchInterval, setRefetchInterval] = React.useState(2000)
const { data, status } = useQuery({
    queryKey: ["poll"], 
    queryFn: fakePoll,
    config: {
      refetchInterval,
      enabled: contract?.status === "Processing",
      onSuccess: (result) => setRefetchInterval(0)
    }
  });

[wtanna]

This is a nice simple solution! But it does mean that I'll need to use useEffect to reset the refetchInterval when the enabled changes.

  const [refetchInterval, setRefetchInterval] = useState(2000)

  useEffect(() => {
    setRefetchInterval(2000)
  }, [generatedContract?.id])

  const { data: contract } = useQuery(
    ["fetchContract", generatedContract?.id],
    pollContracts(generatedContract?.id),
    {
      refetchInterval: refetchInterval,
      enabled: generatedContract?.id,
      onSuccess: (contract) => {
        if (
          contract.status === CONTRACT_STATUSES.CONTRACT_GENERATED ||
          contract.status === CONTRACT_STATUSES.GENERATION_FAILED
        ) {
          setRefetchInterval(0)
        }
      },
    },
  )

https://codesandbox.io/s/second-way-react-query-polling-no-stateeffect-6m9k7?file=/src/App.js

Which maybe this is ok for my use case. It's readable and doesn't require a dev to really understand react-query to know what is happening in the onSuccess function. Pulling in queryCache and resetting it feels like it could lead to some confusing consequences.

It would still be cool to have some way to manipulate the config (or turn off the refetchInterval) from inside the different functions. So I could have react-query handle everything 😄

[wolverineks]

useMutation also takes onMutate and onSuccess callbacks, maybe turn it back on then?
https://react-query.tanstack.com/docs/api/#usemutation

[wtanna]

Ah yes of course! That is perfect! Thank you @wolverineks!

https://codesandbox.io/s/third-way-react-query-polling-no-stateeffect-49eg7?file=/src/App.js

Here is all the code for future viewers, in case the sandbox is ever removed:

import React, { useState } from "react";
import "./styles.css";
import { useQuery, useMutation } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";
import { v4 as uuidv4 } from "uuid";

let counter = {};

async function fakePoll(_, id) {
  await new Promise(r => setTimeout(r, 1000));

  // This imitates some "work" that is being done on the "server". After
  // 3 (or more) requests have been done to the server the contract has
  // finished being generated and exists on some cloud platform somewhere.
  counter[id] += 1;
  let status = counter[id] >= 3 ? "Complete" : "Processing";
  return { id, status };
}

export default function App() {
  const [refetchInterval, setRefetchInterval] = useState(2000);

  const [createContractMutation, { data: contract }] = useMutation(
    () => {
      const id = uuidv4();
      counter[id] = 0;

      return { id };
    },
    {
      onSuccess: () => {
        setRefetchInterval(2000);
      }
    }
  );

  const { data, status } = useQuery(["poll", contract?.id], fakePoll, {
    initialData: { status: "Processing" },
    refetchInterval: refetchInterval,
    enabled: contract?.id,
    onSuccess: data => {
      if (data.status !== "Processing") {
        setRefetchInterval(0);
      }
    }
  });

  return (
    <div className="App">
      <div>Polled {counter[(contract?.id)] ?? "0"} times</div>
      <div>Status: {status}</div>
      {data && (
        <div>
          <pre>
            <code>{JSON.stringify(data, null, 2)}</code>
          </pre>
        </div>
      )}
      <button onClick={() => createContractMutation()}>Start Polling</button>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

[wtanna]

Unfortunately, although this approach worked in July, from updating to version 2.15.2 something broke and now this is no longer an option. I am still trying to dig into why and if there is a different solution.

[wtanna]

Not sure what the actual code change was exactly, but the fix was to simply change

      if (data.status !== "Processing") {
-        setRefetchInterval(0);
+        setRefetchInterval(-1);
      }

by using a negative number I don't run into the issue where it's stuck in an infinite loop. I updated the sandbox to 2.20.0 and everything is working as it should.

[dustinaleksiuk]

For future readers: the react-query docs indicate that you can specify a number or false for the refetchInterval. This likely changed since you wrote your comment but I'd recommend that people use 'false' instead of -1 given what the docs say.

[TkDodo]

This is now possible since 3.25.0 by providing a function directly to refetchInterval

[priyajeet]

@TkDodo can the error also be provided along with the data to the function?

[TkDodo]

The second Parameter is the whole query - it should contain query.state.errror