useQuery infinite retry

[mheinzelman]

Hello! I am running into a problem were if one of my queries throws an error it will infinitely retry.
I have a parent component that calls a query like this and renders its child based on if the query is loading or not. In the query below you will see i am simulating an error.

export const useQueryOne = () => {
  return useQuery(
    "query-1",
    () =>
      new Promise((resolve, reject) => {
        reject("error in query-1");
      })
  );
};

that query is consumed by this component

export const ComponentOne = () => {
  const { isLoading } = useQueryOne();

  return isLoading ? "LOADING" : <ComponentTwo />;
};

ComponentTwo uses a query with a refetch interval that is set to -1 onError. This query is also dependent on the data from useQueryOne.

export const ComponentTwo = () => {
  const { isLoading, data } = usePollingQuery();

  return <>{data}</>;
};

usePollingQuery:

/**
 * this query is dependent on the data returned from useQueryOne
 */
export const usePollingQuery = () => {
  const [refetchInterval, setRefetchInterval] = useState(1000);
  // Pretend we need this data in the queryFunction
  const { data } = useQueryOne();
  return useQuery(
    "polling-query",
    () =>
      new Promise((resolve, reject) => {
        resolve("data");
      }),
    {
      refetchInterval: refetchInterval,
      onError: () => {
        setRefetchInterval(-1);
      }
    }
  );
};

When simulating an error in useQueryOne, it infinitely retries this query and I cannot figure out why. Here is a code sandbox: https://codesandbox.io/s/infallible-chatelet-gpk3w?file=/src/queryHooks.ts

I would really appreciate any help! I would love to get this to throw one error and then stop calling the queryfn

[TkDodo]

your conditional mounting creates an infinite loop. Here is what happens:

• ComponentOne mounts, triggers a query. LOADING is shown.
• the query errors, so status goes to error, which makes isLoading false
• because of that, ComponentTwo is mounted
• ComponentTwo also uses the query of component one. The query is erroneous, so it will refetch because of the mount.
• this in turn will set the query into loading state again
• ComponentOne will be informed about that, and will unmount component 2
• the query errors and ComponentTwo will be mounted again
  ---> rinse and repeat to Infinity

the easiest fix would be to implement proper error handling somewhere. Do not mount ComponentTwo if the query is erroneous. You can also only mount it if you actually have data:

export const ComponentOne = () => {
  const { data } = useQueryOne();

  return !data ? "LOADING" : <ComponentTwo />;
};

This will stop the recursion, but it always display LOADING on the screen. Again, handle errors somewhere (in ComponentOne, in an Error Boundary, ...) and the problem will go away :)