enabled flag for queryClient.prefetchQuery

[anicioalexandre]

Hello everybody.

I've been using queryClient.prefetchQuery quite a lot recently and I've been missing having an enabled flag, similar to the one we have on useQuery. So we can apply the same or even different enabled rules for prefetching a query without having to add exceptions somewhere else.

A common thing that I saw myself doing is, when I have to prefetch, I normally want to await for my main query to finish so it gets prioritized on the network and after that, I call the prefetch. But, right now, I have to wrap my prefetch function in a condition in order for it waits its time.

const useCustomQuery = (condition) => {
  const queryClient = useQueryClient()

  const query = useQuery(
    ["custom-key"],
    () => fetcher(),
    {
      enabled: condition,
    },
  )

  const prefetch = async (otherCondition) => {
    await queryClient.prefetchQuery({
      queryKey: ["custom-key"],
      queryFn:  () => fetcher(),
      // enabled key on prefetchQuery
      enabled: condition && otherCondition,
    })
  }

  return {...query, prefetch }
}

export default useCustomQuery

Let me know if you guys think that makes sense, if so I would love to contribute!

And thanks for all your hard work in making this library, it's really amazing!

[TkDodo]

The only reason why useQuery has an enabled option is because you can't call it conditionally, as it's a hook. You can just wrap queryClient.prefetchQuery in an if statement and not call it instead.

Also, enabled is an Observer level property, and prefetchQuery doesn't create a QueryObserver - it just fetches data and puts into the cache once.

[anicioalexandre]

Got it, thanks!

[suryaashish-tyke]

The only reason why useQuery has an enabled option is because you can't call it conditionally, as it's a hook. You can just wrap queryClient.prefetchQuery in an if statement and not call it instead.

Also, enabled is an Observer level property, and prefetchQuery doesn't create a QueryObserver - it just fetches data and puts into the cache once.

What is the case if we use usePrefetchQuery

[TkDodo]

same thing: it’s just a wrapper around prefetchQuery

[tran-simon]

same thing: it’s just a wrapper around prefetchQuery

How would you conditionnally call usePrefetchQuery?
We can't conditionnally call it because of the rule of hooks

[TkDodo]

you can conditionally render a component that calls usePrefetchQuery.