Conditional prefetching with usePrefetchQuery

[olivierbeaulieu]

The addition of usePrefetchQuery is great. However it doesn't have an enabled prop, which would be useful in conditionally prefetching queries.

As an example:

const isFooEnabled  = useFeatureFlag('foo_enabled')

usePrefetchQuery({
  queryKey: ...
  queryFn: ...,
  enabled: isFooEnabled
})

Is this something we could support?

[TkDodo]

why would you need conditional prefetching? The better idea would be to move it to a component that gets conditionally rendered.

[olivierbeaulieu]

Might I ask why it's a better idea to split it in a different component instead?

Moving it down would put it at the risk of suspense creating a request waterfall, whereas moving upwards would imply creating an wrapper around the entire component, passing props through, etc. Seems like elegant than the enabled prop pattern?

Thanks for your input!

[TkDodo]

hm, can you show an actual example where you'd need conditional prefetching please?

[olivierbeaulieu]

Sure! I cannot share the exact code, but here's a similar example. Our app manages data from accounting platform (quickbooks, etc.).

There's a ton of data from different endpoints that may or may not be available from different endpoints based on user, as well as feature flags. Also of note, we use useSuspenseQuery a fair bit to delegate the rendering of loading states upwards (for better or for worse).

The structure of a typical page where we need conditional prefetching (simplified) looks like this - let's assume this is a page that shows general information about your accounting platform, as well as a list of accounting tracking categories from your accounting platform, but these tracking categories are only rendered if you have the right permissions and feature flags

function AccountingPage() {
  return (
    <PageLayout>
      <Header title="Accounting" />
      <AccountingPlatformDetails />
    </PageLayout>
  )
}

/**
 * This component can be mounted in AccountingPage, but is also re-used in other components in the app,
 * so we want to keep it as batteries-included as possible (doesn't make assumptions about prior components prefetching)
 */
function AccountingPlatformDetails() {
    const trackingCategoriesFlagEnabled = useFeatureFlag('tracking_categories')
    const hasPermission = useHasPermission('READ_TRACKING_CATEGORIES')

    const { data: platformDetails } = useSuspenseQuery(getAccountingDetails())

    return (
      <>
        <DetailsView accountingPlatform={platformDetails} />
        {trackingCategoriesFlagEnabled && hasPermission && <TrackingCategories />}
      </>
    )
}

function TrackingCategories() {
  const { data: trackingCategories } = useSuspenseQuery(getTrackingCategories())

  return <div>trackingCategories.map(...)</div>
}

So here we have a suspense-induced request waterfall, although it could be addressed by prefetching. The way we're thinking we could solve the problem elegantly is to add usePrefetchQuery to AccountingPlatformDetails like this:

  const prefetchTrackingCategories = trackingCategoriesFlagEnabled && hasPermission
  usePrefetchQuery({
    ...getTrackingCategories(),
    enabled: prefetchTrackingCategories
  })

It sounds like what you are suggesting is to instead do the following, in the returned JSX:

{prefetchTrackingCategories && <PrefetchQuery query={getTrackingCategories()} />}

Am I understanding this correctly? We couldn't put this in AccountingPlatformDetails since it would only happen after the suspenseful call resolves, defeating the purpose. So we'd need to wrap AccountingPlatformDetails with another component. That seems like a lot more code, rather than controlling the behavior via an enabled prop?

Thank you so much for helping me understand this 🙇🙇🙇

[TkDodo]

if we add enabled, it wouldn't have the same signature as on useQuery because we can't make it a function because we don't have a query instance yet. I think your case is rare enough to not include it, you can always copy the hooks implementation (it's 3 lines of code) and add an if statement yourself, of create a component that you can render conditionally that calls the hook and returns null.

[olivierbeaulieu]

That works. Thanks!