fix(react-query-devtools): only export devtools in development mode (#3861)

Author: TkDodo

package.json

@@ -15,6 +15,7 @@
     "test:jest:dev": "jest --config ./jest.config.ts --watch",
     "test:size": "npm run build && bundlewatch",
     "build": "rollup --config rollup.config.js && npm run typecheck",
+    "postbuild": "cp ./packages/react-query-devtools/src/noop.ts ./packages/react-query-devtools/build/esm/noop.js",
     "typecheck": "tsc -b",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"npm run typecheck -- --watch\" \"npm run test\"",
     "linkAll": "lerna exec 'npm run link' --parallel",

packages/react-query-devtools/package.json

@@ -18,6 +18,12 @@
     "build/*",
     "src"
   ],
+  "exports": {
+    "development": {
+      "default": "./build/esm/index.js"
+    },
+    "default": "./build/esm/noop.js"
+  },
   "scripts": {
     "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
     "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
 import { useQuery, QueryClient } from '@tanstack/react-query'
-import { sortFns } from '../devtools'
+import { sortFns } from '../utils'
 import {
   getByTextContent,
   renderWithClient,

packages/react-query-devtools/src/__tests__/utils.tsx

@@ -1,7 +1,7 @@
 import { MatcherFunction } from '@testing-library/dom/types/matches'
 import { render } from '@testing-library/react'
 import * as React from 'react'
-import { ReactQueryDevtools } from '..'
+import { ReactQueryDevtools } from '../devtools'
 
 import {
   QueryClient,

packages/react-query-devtools/src/devtools.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 import {
-  Query,
   useQueryClient,
   onlineManager,
   notifyManager,
@@ -12,7 +11,7 @@ import {
 } from '@tanstack/react-query'
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
-import { useIsMounted } from './utils'
+import { sortFns, useIsMounted } from './utils'
 
 import {
   Panel,
@@ -29,7 +28,7 @@ import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
 import Logo from './Logo'
 
-interface DevtoolsOptions extends ContextOptions {
+export interface DevtoolsOptions extends ContextOptions {
   /**
    * Set this true if you want the dev tools to default to being open
    */
@@ -375,27 +374,6 @@ export function ReactQueryDevtools({
   )
 }
 
-const getStatusRank = (q: Query) =>
-  q.state.fetchStatus !== 'idle'
-    ? 0
-    : !q.getObserversCount()
-    ? 3
-    : q.isStale()
-    ? 2
-    : 1
-
-export const sortFns: Record<string, (a: Query, b: Query) => number> = {
-  'Status > Last Updated': (a, b) =>
-    getStatusRank(a) === getStatusRank(b)
-      ? (sortFns['Last Updated']?.(a, b) as number)
-      : getStatusRank(a) > getStatusRank(b)
-      ? 1
-      : -1,
-  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),
-  'Last Updated': (a, b) =>
-    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,
-}
-
 const useSubscribeToQueryCache = <T,>(
   queryCache: QueryCache,
   getSnapshot: () => T,

packages/react-query-devtools/src/index.ts

@@ -1 +1,15 @@
-export * from './devtools'
+import * as devtools from './devtools'
+
+export const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : devtools.ReactQueryDevtools
+
+export const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =
+  process.env.NODE_ENV !== 'development'
+    ? (function () {
+        return null
+      } as any)
+    : devtools.ReactQueryDevtoolsPanel

packages/react-query-devtools/src/utils.ts

@@ -124,3 +124,24 @@ export const displayValue = (value: unknown) => {
 
   return JSON.stringify(newValue, name)
 }
+
+const getStatusRank = (q: Query) =>
+  q.state.fetchStatus !== 'idle'
+    ? 0
+    : !q.getObserversCount()
+    ? 3
+    : q.isStale()
+    ? 2
+    : 1
+
+export const sortFns: Record<string, (a: Query, b: Query) => number> = {
+  'Status > Last Updated': (a, b) =>
+    getStatusRank(a) === getStatusRank(b)
+      ? (sortFns['Last Updated']?.(a, b) as number)
+      : getStatusRank(a) > getStatusRank(b)
+      ? 1
+      : -1,
+  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),
+  'Last Updated': (a, b) =>
+    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,
+}