useQuery making two calls

[KimberlyRamirez]

Hi,

I have a Parent component where I am defining my query, and queryFn. Once isLoading is false and there is no error the child is executed. In the child I use useQuery again to get that data. By doing this I can access that data anywhere in the app without having to prop drill. I have successfully used this method multiple times, however, in this one component it is making a call twice instead of just once. Any thoughts on why?

Parent component

const { data, isLoading } = useQuery<ProductDto | undefined>({
    queryKey: ["getProductData"],
    queryFn: async () => await productClient?.getProductBySku(marketingSku);
  });

  if (isLoading) return <div>Loading...</div>;

  return <Child />

Child component

const { data } = useQuery<ProductPublicDto | undefined>({ queryKey: ["getProductData"] })

The data hasn't changed, and it only happens on the initial load, I just don't know why. In the past I have used getQueryData but we are moving away from using that because React 19 has re-rendering issues with it.

[Porkstone]

I read this about why react-query will run twice on initial load under certain circumstances, maybe it's related.
#3633

[TkDodo]

it's because staleTime defaults to zero. Please read: https://tkdodo.eu/blog/react-query-as-a-state-manager

[nabn]

@TkDodo thanks for your work on this fantastic library.

I have a related, but slightly different case: the query errors on first load (imagine apis 500-ing when app starts). I have staleTime set to a non-zero value, but I believe that's not relevant in case queryFn errors(?)

Stackblitz for minimal reproduction

Expectation: parent invokes queryFn, fails, then stops because retry = false. Child shares the cache so it also gets the error from previous invocation.

Actual: I believe the child re-using the query calls retries queryFn because of previous failure which causes isLoading to flip to true, unmounting the child which then causes this to go on a loop.

Appreciate that isLoading is probably not recommended here, but I couldn't use isPending because in the actual code that I first noticed this behaviour, I'm using dependent queries which are disabled and thus seem to be in a 'pending' state.

Is there a recommended approach to avoid a potential ddos in this case?

[TkDodo]

well I guess so? you probably don't want infinite loops 😂

[nabn]

haha

i meant more that this might be a likely scenario that other might run into. Perhaps retry option should apply in this case?

@TkDodo

[TkDodo]

retry is an opaque process that is always applied. When a query goes into error state, it has already exhausted all retries.

[nabn]

When a query goes into error state, it has already exhausted all retries.

I read this to then mean that the useQuery call in the child would not be retried, which is what we're not seeing?

[TkDodo]

no, there's a difference between retry and refetch. When the child mounts, a refetch occurs because there is no data yet and a new observer mounts. That makes the query run.

And whenever a query runs, it can retry the queryFn multiple times. It will only go into error state after all retries have been done.