Skip to content

Commit ea80700

Browse files
TkDodoDamianOsipiukJohnDalytannerlinsley
authored
feat: ESM support (#4092)
* fix: restore missing `exports` declarations (#3892) * fix: restore missing `exports` declarations * fix: restore package.json exports[C * fix: reexport types used by vue-query * fix: react-native uSES usage * fix: emit mjs for esm * fix: uSES build * fix: devtools exports to allow devtools in prod * fix: cjs and esm build bundled to lib dir * fix: sideEffect in react-query, better files paths * fix: generate declarations to lib * fix: lint and tests * fix: use the same ts build method for tests * fix: change force prod import * fix: subpackage dependencies (#4013) * fix: umd-build (#3924) * - Fix UMD build getting overwritten - Updating "browser" field for @tanstack/react-query-devtools * Updating the "browser" field to be the same as "main" * release: v4.0.11-beta.0 * release: v4.0.11-beta.1 * fix(react-query-devtools): cjs devtools fallback (#4048) * release: v4.0.11-beta.2 * fix: remove browser entry, fix umd size (#4044) * fix: remove browser entry, fix umd size * fix: bundle query-core with react-query for umd * fix: remove missed browser entry * chore: remove 'browser' field from package validation because it doesn't exist anymore * release: v4.0.11-beta.3 * release: v4.0.11-beta.4 * chore: react-query should be a peerDependency of the devtools * release: v4.0.11-beta.5 * release: v4.3.0-beta.0 * fix: webpack 4 fallback to cjs (#4069) * fix: publish script shouldn't check against module anymore * fix: publish script I don't think we can have single quotes in commit message when passing them to --notes * release: v4.3.0-beta.2 * release: v4.3.0-beta.3 * fix: umd build size, force prod devtools (#4074) * fix: umd build size * fix: devtools force production * release: v4.3.0-beta.4 * release: v4.3.0-beta.5 * fix: reintroduce production export (#4090) * release: v4.3.0-beta.6 * fix(react-query-devtools): always useEffect for the mounted check no effect runs on the server, and there is no real advantage to useLayoutEffect on the client; somehow, this dynamic check creates problems with the production build of the devtools * release: v4.3.0-beta.7 * docs: document devtools in production * docs: document devtools in production * docs: document devtools in production nodenext needs 4.7 * fix: support react-native (#4125) * fix: support react-native * chore: remove banner from build Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com> Co-authored-by: John Daly <john.daly2@gmail.com> Co-authored-by: Tanner Linsley <tannerlinsley@users.noreply.github.com>
1 parent f231f8c commit ea80700

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1688
-1088
lines changed

‎docs/devtools.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,61 @@ Use these options to style the dev tools.
8787
- The standard React style object used to style a component with inline styles
8888
- `className: string`
8989
- The standard React className property used to style a component with classes
90+
91+
## Devtools in production
92+
93+
Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
94+
95+
```tsx
96+
import * as React from 'react'
97+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
98+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
99+
import { Example } from './Example'
100+
101+
const queryClient = new QueryClient()
102+
103+
const ReactQueryDevtoolsProduction = React.lazy(() =>
104+
import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(d => ({
105+
default: d.ReactQueryDevtools
106+
}))
107+
)
108+
109+
function App() {
110+
const [showDevtools, setShowDevtools] = React.useState(false)
111+
112+
React.useEffect(() => {
113+
// @ts-ignore
114+
window.toggleDevtools = () => setShowDevtools(old => !old)
115+
}, [])
116+
117+
return (
118+
<QueryClientProvider client={queryClient}>
119+
<Example />
120+
<ReactQueryDevtools initialIsOpen />
121+
{ showDevtools && (
122+
<React.Suspense fallback={null}>
123+
<ReactQueryDevtoolsProduction />
124+
</React.Suspense>
125+
)}
126+
</QueryClientProvider>
127+
);
128+
}
129+
130+
export default App
131+
```
132+
133+
With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
134+
135+
### Modern bundlers
136+
137+
If your bundler supports package exports, you can use the following import path:
138+
139+
```tsx
140+
const ReactQueryDevtoolsProduction = React.lazy(() =>
141+
import('@tanstack/react-query-devtools/production').then(d => ({
142+
default: d.ReactQueryDevtools
143+
}))
144+
)
145+
```
146+
147+
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"next": "12.2.2",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",
13-
"@tanstack/react-query": "4.2.3",
14-
"@tanstack/react-query-devtools": "4.2.3"
13+
"@tanstack/react-query": "4.3.0-beta.4",
14+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
1515
},
1616
"scripts": {
1717
"dev": "next",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"graphql-request": "^3.1.0",
1414
"react": "^18.0.0",
1515
"react-dom": "^18.0.0",
16-
"@tanstack/react-query": "4.2.3",
17-
"@tanstack/react-query-devtools": "4.2.3"
16+
"@tanstack/react-query": "4.3.0-beta.4",
17+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
1818
},
1919
"devDependencies": {
2020
"@vitejs/plugin-react": "^2.0.0",

‎examples/react/basic-typescript/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
"broadcast-channel": "^3.4.1",
1414
"react": "^18.0.0",
1515
"react-dom": "^18.0.0",
16-
"@tanstack/react-query": "4.2.3",
17-
"@tanstack/react-query-devtools": "4.2.3",
18-
"@tanstack/react-query-persist-client": "4.2.1",
19-
"@tanstack/query-sync-storage-persister": "4.2.3",
16+
"@tanstack/react-query": "4.3.0-beta.4",
17+
"@tanstack/react-query-devtools": "4.3.0-beta.7",
18+
"@tanstack/react-query-persist-client": "4.3.0-beta.4",
19+
"@tanstack/query-sync-storage-persister": "4.3.0-beta.4",
2020
"react-scripts": "3.0.1",
2121
"stop-runaway-react-effects": "^1.2.0",
2222
"styled-components": "^4.3.2",

‎examples/react/basic/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"axios": "^0.21.1",
1313
"react": "^18.0.0",
1414
"react-dom": "^18.0.0",
15-
"@tanstack/react-query": "4.2.3",
16-
"@tanstack/react-query-devtools": "4.2.3"
15+
"@tanstack/react-query": "4.3.0-beta.4",
16+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
1717
},
1818
"devDependencies": {
1919
"@vitejs/plugin-react": "^2.0.0",

‎examples/react/custom-hooks/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "@tanstack/query-example-react-custom-hooks",
3+
"private": true,
4+
"version": "0.0.1",
5+
"scripts": {
6+
"start": "rescripts start",
7+
"build": "rescripts build",
8+
"test": "rescripts test",
9+
"eject": "rescripts eject"
10+
},
11+
"dependencies": {
12+
"axios": "^0.26.1",
13+
"react": "^18.0.0",
14+
"react-dom": "^18.0.0",
15+
"@tanstack/react-query": "4.3.0-beta.4",
16+
"@tanstack/react-query-devtools": "4.3.0-beta.7",
17+
"react-scripts": "3.0.1",
18+
"stop-runaway-react-effects": "^1.2.0",
19+
"styled-components": "^4.3.2"
20+
},
21+
"devDependencies": {
22+
"@rescripts/cli": "^0.0.11",
23+
"@rescripts/rescript-use-babel-config": "^0.0.8",
24+
"@rescripts/rescript-use-eslint-config": "^0.0.9",
25+
"babel-eslint": "10.0.1",
26+
"eslint-config-prettier": "^6.12.0"
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
40+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"axios": "^0.26.1",
1313
"react": "^18.0.0",
1414
"react-dom": "^18.0.0",
15-
"@tanstack/react-query": "4.2.3",
16-
"@tanstack/react-query-devtools": "4.2.3"
15+
"@tanstack/react-query": "4.3.0-beta.4",
16+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
1717
},
1818
"devDependencies": {
1919
"@vitejs/plugin-react": "^2.0.0",

‎examples/react/focus-refetching/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@tanstack/query-example-react-focus-revalidate",
3+
"private": true,
4+
"version": "1.0.0",
5+
"main": "index.js",
6+
"license": "MIT",
7+
"dependencies": {
8+
"axios": "^0.21.1",
9+
"isomorphic-unfetch": "3.0.0",
10+
"next": "12.2.0",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"@tanstack/react-query": "4.3.0-beta.4",
14+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
15+
},
16+
"scripts": {
17+
"dev": "next",
18+
"start": "next start",
19+
"build": "next build"
20+
}
21+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",
1313
"react-intersection-observer": "^8.33.1",
14-
"@tanstack/react-query": "4.2.3",
15-
"@tanstack/react-query-devtools": "4.2.3"
14+
"@tanstack/react-query": "4.3.0-beta.4",
15+
"@tanstack/react-query-devtools": "4.3.0-beta.7"
1616
},
1717
"scripts": {
1818
"dev": "next",

‎examples/react/nextjs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"next": "12.2.2",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16-
"@tanstack/react-query": "4.2.3",
17-
"@tanstack/react-query-devtools": "4.2.3",
16+
"@tanstack/react-query": "4.3.0-beta.4",
17+
"@tanstack/react-query-devtools": "4.3.0-beta.7",
1818
"resolve-from": "^5.0.0",
1919
"web-streams-polyfill": "^3.0.3"
2020
},

0 commit comments

Comments
 (0)