ESM support

docs/devtools.md

@@ -87,3 +87,61 @@ Use these options to style the dev tools.
   - The standard React style object used to style a component with inline styles
 - `className: string`
   - The standard React className property used to style a component with classes
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import * as React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(d => ({
+          default: d.ReactQueryDevtools
+    }))
+)
+
+function App() {
+    const [showDevtools, setShowDevtools] = React.useState(false)
+
+    React.useEffect(() => {
+        // @ts-ignore
+        window.toggleDevtools = () => setShowDevtools(old => !old)
+    }, [])
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <Example />
+            <ReactQueryDevtools initialIsOpen />
+            { showDevtools && (
+                <React.Suspense fallback={null}>
+                    <ReactQueryDevtoolsProduction />
+                </React.Suspense>
+            )}
+        </QueryClientProvider>
+    );
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+### Modern bundlers
+
+If your bundler supports package exports, you can use the following import path:
+
+```tsx
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import('@tanstack/react-query-devtools/production').then(d => ({
+          default: d.ReactQueryDevtools
+    }))
+)
+```
+
+For TypeScript, you would need to set `moduleResolution: 'nodenext'` in your tsconfig, which requires at least TypeScript v4.7.

examples/react/auto-refetching/package.json

@@ -10,8 +10,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/basic-graphql-request/package.json

@@ -13,8 +13,8 @@
     "graphql-request": "^3.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/basic-typescript/package.json

@@ -13,10 +13,10 @@
     "broadcast-channel": "^3.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
-    "@tanstack/react-query-persist-client": "4.2.1",
-    "@tanstack/query-sync-storage-persister": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
+    "@tanstack/react-query-persist-client": "4.3.0-beta.4",
+    "@tanstack/query-sync-storage-persister": "4.3.0-beta.4",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2",

examples/react/basic/package.json

@@ -12,8 +12,8 @@
     "axios": "^0.21.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/custom-hooks/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tanstack/query-example-react-custom-hooks",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "axios": "^0.26.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
+    "react-scripts": "3.0.1",
+    "stop-runaway-react-effects": "^1.2.0",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1",
+    "eslint-config-prettier": "^6.12.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/react/default-query-function/package.json

@@ -12,8 +12,8 @@
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/focus-refetching/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-focus-revalidate",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "isomorphic-unfetch": "3.0.0",
+    "next": "12.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/react/load-more-infinite-scroll/package.json

@@ -11,8 +11,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.33.1",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/nextjs/package.json

@@ -13,8 +13,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "resolve-from": "^5.0.0",
     "web-streams-polyfill": "^3.0.3"
   },

examples/react/offline/package.json

@@ -15,10 +15,10 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
-    "@tanstack/react-query-persist-client": "4.2.1",
-    "@tanstack/query-sync-storage-persister": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
+    "@tanstack/react-query-persist-client": "4.3.0-beta.4",
+    "@tanstack/query-sync-storage-persister": "4.3.0-beta.4"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/optimistic-updates-typescript/package.json

@@ -12,8 +12,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "typescript": "^4.1.2"
   },
   "scripts": {

examples/react/optimistic-updates/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-optimistic-updates",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "isomorphic-unfetch": "3.0.0",
+    "next": "12.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/react/pagination/package.json

@@ -10,8 +10,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/playground/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/prefetching/package.json

@@ -10,8 +10,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/react-native/package.json

@@ -27,8 +27,8 @@
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-web": "0.17.1",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "expo-constants": "~12.1.3",
     "react-native-paper": "4.9.2",
     "react-native-screens": "~3.8.0",

examples/react/rick-morty/package.json

@@ -12,8 +12,8 @@
     "@material-ui/core": "^4.9.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2"
   },

examples/react/simple/package.json

@@ -12,8 +12,8 @@
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/star-wars/package.json

@@ -12,8 +12,8 @@
     "@material-ui/core": "^4.9.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2"
   },

examples/react/suspense/package.json

@@ -10,8 +10,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-error-boundary": "^2.2.3",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",