Give override option to show/hide Devtools besides NODE_ENV

[seanblonien]

Right now, the dev tools can only show hide depending on process.env.NODE_ENV !== 'development' as seen here in the devtools source code file.

I have this weird use-case where I want the devtools to show up on a remote dev environment instance, but I want to still build that code (using CRA build toolchain) in production mode with the process.env.NODE_ENV === 'production'.

Could we add a new environment variable, decoupled completely from NODE_ENV, that enables showing/hiding this component?

Also, not really sure how this pattern works, but it this ONLY happens are build-time, my suggestion won't work, cause I currently am doing a build-once approach for all environments, from remote dev to production. And if this a built time removal of code, then I would have to build twice with different environment variables which doesn't seem optimal.

I implement this by code-splitting using dynamic import which means the loading is gated at runtime, not at build time. If process.env.NODE_ENV !== 'development' is a build-time thing, is there a reason why that's preferred over runtime loading?

[TkDodo]

I think not all bundlers support code splitting maybe. I've been using this approach to lazy-load and toggle them in production: https://twitter.com/tannerlinsley/status/1392857647037091849

[seanblonien]

Great that's all I really needed!

[seanblonien]

Oh also just realized since I was already doing the conditional check elsewhere for dynamically loading the dev tools, I simply just changed from this

import {ReactQueryDevtools} from 'react-query/devtools';

to this

import {ReactQueryDevtools} from 'react-query/devtools/development';

You simply don't need an option to override, you just import it NOT from the barrel file