Allow lazy loading DevTools in production builds

[Svish]

We have a staging environment which mimics production and is a production build.

Sometimes it would be helpful to still get access to the react-query developer tools, but it's currently hard-coded to not exist in production builds.

An easy solution would be to add a prop, like <ReactQueryDevtools enabled={ isAdmin || !env.isProduction } />, but then the devtools wouldn't be tree-shakeable, which I assume it is.

So best solution to this could maybe be to allow the DevTools to be lazy loaded? Something along the lines of:

const ReactQueryDevtools = React.lazy(() => import('react-query/devtools')

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      { (user.isAdmin || !env.isProduction) && <ReactQueryDevtools /> }
    </QueryClientProvider>
  );

Not sure how packages or tree-shaking works, but even better would be if could just be imported directly as well:

import ReactQueryDevtools from 'react-query/devtools-lazy`

Where react-query/devtools was the current variant as it is, and react-query/devtools-lazy was the lazy-loadable variant usable in production.