How can I lazy load this library?

[michaelschufi]

Hi

I am currently implementing loading optimizations of my Next.js' powered website. I found that lazy loading @tanstack/react-query would improve the initial loading time of the website, since all the queries used can easily be deferred.

What is the correct way to achieve this? I am currently using the Provider/Context pattern in _app.tsx:

_app.tsx

const MyApp = ({ Component, pageProps }: AppProps) => {
 const [queryClient] = useState(() => new QueryClient());

 // ...
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  )
} 

And then inside a component useQuery or useMutation.

Even if I would just keep the provider (since the provider is probably tiny) I cannot have e.g. null for its client prop while the library is loading.

What is the best way to achieve this?

[TkDodo]

since the provider is probably tiny

the provider is tiny, but the new QueryClient() is not. It contains the caches and all the logic, it's most of the bundle size.

maybe one way to do it would probably be to put the QueryClientProvider into a component that your ender in your App, and then have this component be lazy loaded.

However, this would mean that every page that has react-query would need to be rendered inside this component, and the queryClient would not be shared.

I don't see this as benefitial

[michaelschufi]

I don't see this as benefitial

You don't see the QueryClient sharing as beneficial or the other way around?

How about exporting the QueryClient in a module instead of using the provider? Would something like this be possible?

[TkDodo]

You don't see the QueryClient sharing as beneficial or the other way around?

I don't see lazy loading as benefitial.

How about exporting the QueryClient in a module instead of using the provider? Would something like this be possible?

You create the client instance. The provider itself is just react context. lazy loading the provider would achieve nothing. lazy loading the QueryClient would but then you can't share it. You can't have the cake and eat it, too :)

[michaelschufi]

Thank you for answers. :)
I guess I'll have to have different clients then. Because having it initialized, and the library included in the shared bundle, seems a bit unnecessary if only 5% of the pages need it.