Skip to content

Commit 58a9fe9

Browse files
TkDodoTkDodo
authored
fix(types): use react 18 types (#3482)
1 parent 13dbb27 commit 58a9fe9

13 files changed

+50
-53
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@
101101
"@types/jest": "^26.0.4",
102102
"@types/jscodeshift": "^0.11.3",
103103
"@types/node": "^16.11.10",
104-
"@types/react": "^17.0.37",
105-
"@types/react-dom": "^17.0.11",
104+
"@types/react": "^18.0.0",
105+
"@types/react-dom": "^18.0.0",
106106
"@typescript-eslint/eslint-plugin": "^5.6.0",
107107
"@typescript-eslint/parser": "^5.6.0",
108108
"babel-eslint": "^10.1.0",
@@ -131,7 +131,7 @@
131131
"react-17": "npm:react@^17.0.2",
132132
"react-dom": "^18.0.0",
133133
"react-dom-17": "npm:react-dom@^17.0.2",
134-
"react-error-boundary": "^2.2.2",
134+
"react-error-boundary": "^3.1.4",
135135
"replace": "^1.2.0",
136136
"rimraf": "^3.0.2",
137137
"rollup": "^2.68.0",

‎src/devtools/useLocalStorage.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function useLocalStorage<T>(
3131
}, [defaultValue, key])
3232

3333
const setter = React.useCallback(
34-
updater => {
34+
(updater: any) => {
3535
setValue(old => {
3636
let newVal = updater
3737

‎src/persistQueryClient/tests/PersistQueryClientProvider.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ describe('PersistQueryClientProvider', () => {
147147

148148
return (
149149
<div>
150-
<h1>{state.data}</h1>
150+
<h1>{String(state.data)}</h1>
151151
<h2>fetchStatus: {state.fetchStatus}</h2>
152152
</div>
153153
)

‎src/reactjs/Hydrate.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,10 @@ export function useHydrate(state: unknown, options: HydrateOptions = {}) {
2828
export interface HydrateProps {
2929
state?: unknown
3030
options?: HydrateOptions
31+
children?: React.ReactNode
3132
}
3233

33-
export const Hydrate: React.FC<HydrateProps> = ({
34-
children,
35-
options,
36-
state,
37-
}) => {
34+
export const Hydrate = ({ children, options, state }: HydrateProps) => {
3835
useHydrate(state, options)
39-
return children as React.ReactElement<any>
36+
return children as React.ReactElement
4037
}

‎src/reactjs/QueryErrorResetBoundary.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ export interface QueryErrorResetBoundaryProps {
3838
| React.ReactNode
3939
}
4040

41-
export const QueryErrorResetBoundary: React.FC<QueryErrorResetBoundaryProps> = ({
41+
export const QueryErrorResetBoundary = ({
4242
children,
43-
}) => {
43+
}: QueryErrorResetBoundaryProps) => {
4444
const value = React.useMemo(() => createValue(), [])
4545
return (
4646
<QueryErrorResetBoundaryContext.Provider value={value}>

‎src/reactjs/tests/QueryResetErrorBoundary.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ describe('QueryErrorResetBoundary', () => {
194194
const key = queryKey()
195195

196196
function Page() {
197-
const { data, refetch, status, fetchStatus } = useQuery(
197+
const { data, refetch, status, fetchStatus } = useQuery<string>(
198198
key,
199199
async () => {
200200
throw new Error('Error')
@@ -431,7 +431,7 @@ describe('QueryErrorResetBoundary', () => {
431431
let fetchCount = 0
432432

433433
function Page() {
434-
const { data } = useQuery(
434+
const { data } = useQuery<string>(
435435
key,
436436
async () => {
437437
fetchCount++

‎src/reactjs/tests/ssr-hydration.test.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import ReactDOM, { Root } from 'react-dom'
2+
import ReactDOM from 'react-dom'
33
import ReactDOMTestUtils from 'react-dom/test-utils'
44
import ReactDOMServer from 'react-dom/server'
55
// eslint-disable-next-line import/no-unresolved -- types only for module augmentation
@@ -18,8 +18,9 @@ const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
1818

1919
const ReactHydrate = (element: React.ReactElement, container: Element) => {
2020
if (isReact18()) {
21-
let root: Root
21+
let root: any
2222
ReactDOMTestUtils.act(() => {
23+
// @ts-expect-error
2324
root = ReactDOM.hydrateRoot(container, element)
2425
})
2526
return () => {

‎src/reactjs/tests/suspense.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -901,7 +901,7 @@ describe("useQuery's in Suspense mode", () => {
901901
const queryKeys = '1'
902902
const [enabled, setEnabled] = React.useState(false)
903903

904-
const result = useQuery(
904+
const result = useQuery<string>(
905905
[queryKeys],
906906
async () => {
907907
await sleep(10)

‎src/reactjs/tests/useQueries.test.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ describe('useQueries', () => {
5858
return (
5959
<div>
6060
<div>
61-
data1: {result[0].data ?? 'null'}, data2: {result[1].data ?? 'null'}
61+
data1: {String(result[0].data ?? 'null')}, data2:{' '}
62+
{String(result[1].data ?? 'null')}
6263
</div>
6364
</div>
6465
)
@@ -108,7 +109,8 @@ describe('useQueries', () => {
108109
return (
109110
<div>
110111
<div>
111-
data1: {result[0].data ?? 'null'}, data2: {result[1].data ?? 'null'}
112+
data1: {String(result[0].data ?? 'null')}, data2:{' '}
113+
{String(result[1].data ?? 'null')}
112114
</div>
113115
<div>isFetching: {String(isFetching)}</div>
114116
<button onClick={() => setCount(prev => prev + 1)}>inc</button>
@@ -204,8 +206,8 @@ describe('useQueries', () => {
204206
return (
205207
<div>
206208
<div>
207-
data1: {result[0]?.data ?? 'null'}, data2:{' '}
208-
{result[1]?.data ?? 'null'}
209+
data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
210+
{String(result[1]?.data ?? 'null')}
209211
</div>
210212
<div>isFetching: {String(isFetching)}</div>
211213
<button onClick={() => setSeries2(3)}>setSeries2</button>
@@ -259,8 +261,8 @@ describe('useQueries', () => {
259261
return (
260262
<div>
261263
<div>
262-
data1: {result[0]?.data ?? 'null'}, data2:{' '}
263-
{result[1]?.data ?? 'null'}
264+
data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
265+
{String(result[1]?.data ?? 'null')}
264266
</div>
265267
<div>isFetching: {String(isFetching)}</div>
266268
<button onClick={() => setEnableId1(false)}>set1Disabled</button>

‎src/reactjs/tests/useQuery.test.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ describe('useQuery', () => {
153153
if (state.isLoadingError) {
154154
expectType<undefined>(state.data)
155155
expectType<Error>(state.error)
156-
return <span>{state.error}</span>
156+
return <span>{state.error.message}</span>
157157
}
158158

159159
expectType<string>(state.data)
@@ -2772,19 +2772,19 @@ describe('useQuery', () => {
27722772
const key = queryKey()
27732773

27742774
function Page() {
2775-
const { status, error } = useQuery<undefined, string>(
2775+
const { status, error } = useQuery<undefined, Error>(
27762776
key,
2777-
() => Promise.reject('Remote Error'),
2777+
() => Promise.reject(new Error('Remote Error')),
27782778
{
27792779
retry: false,
2780-
useErrorBoundary: err => err !== 'Local Error',
2780+
useErrorBoundary: err => err.message !== 'Local Error',
27812781
}
27822782
)
27832783

27842784
return (
27852785
<div>
27862786
<h1>{status}</h1>
2787-
<h2>{error}</h2>
2787+
<h2>{error?.message ?? ''}</h2>
27882788
</div>
27892789
)
27902790
}
@@ -2795,7 +2795,7 @@ describe('useQuery', () => {
27952795
fallbackRender={({ error }) => (
27962796
<div>
27972797
<div>error boundary</div>
2798-
<div>{error}</div>
2798+
<div>{error.message}</div>
27992799
</div>
28002800
)}
28012801
>
@@ -2812,7 +2812,7 @@ describe('useQuery', () => {
28122812
let count = 0
28132813

28142814
function Page() {
2815-
const result = useQuery(
2815+
const result = useQuery<number, string>(
28162816
key,
28172817
async () => {
28182818
count++
@@ -2860,7 +2860,7 @@ describe('useQuery', () => {
28602860
let count = 0
28612861

28622862
function Page() {
2863-
const result = useQuery(
2863+
const result = useQuery<number, string>(
28642864
key,
28652865
async () => {
28662866
count++

‎src/reactjs/tests/utils.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,12 @@ export const expectType = <T,>(_: T): void => undefined
8181
export const expectTypeNotAny = <T,>(_: 0 extends 1 & T ? never : T): void =>
8282
undefined
8383

84-
export const Blink: React.FC<{ duration: number }> = ({
84+
export const Blink = ({
8585
duration,
8686
children,
87+
}: {
88+
duration: number
89+
children: React.ReactNode
8790
}) => {
8891
const [shouldShow, setShouldShow] = React.useState<boolean>(true)
8992

‎src/reactjs/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
MutateFunction,
1010
} from '../core/types'
1111
import type { QueryClient } from '../core/queryClient'
12+
import * as React from 'react'
1213

1314
export interface ContextOptions {
1415
/**

‎yarn.lock

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2274,13 +2274,6 @@
22742274
dependencies:
22752275
regenerator-runtime "^0.13.4"
22762276

2277-
"@babel/runtime@^7.9.6":
2278-
version "7.9.6"
2279-
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
2280-
integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
2281-
dependencies:
2282-
regenerator-runtime "^0.13.4"
2283-
22842277
"@babel/template@^7.1.0":
22852278
version "7.6.0"
22862279
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -3098,10 +3091,10 @@
30983091
dependencies:
30993092
"@types/react" "^16"
31003093

3101-
"@types/react-dom@^17.0.11":
3102-
version "17.0.11"
3103-
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
3104-
integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
3094+
"@types/react-dom@^18.0.0":
3095+
version "18.0.0"
3096+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.0.tgz#b13f8d098e4b0c45df4f1ed123833143b0c71141"
3097+
integrity sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==
31053098
dependencies:
31063099
"@types/react" "*"
31073100

@@ -3114,10 +3107,10 @@
31143107
"@types/scheduler" "*"
31153108
csstype "^3.0.2"
31163109

3117-
"@types/react@^17.0.37":
3118-
version "17.0.37"
3119-
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
3120-
integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
3110+
"@types/react@^18.0.0":
3111+
version "18.0.0"
3112+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.0.tgz#4be8aa3a2d04afc3ac2cc1ca43d39b0bd412890c"
3113+
integrity sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==
31213114
dependencies:
31223115
"@types/prop-types" "*"
31233116
"@types/scheduler" "*"
@@ -7373,12 +7366,12 @@ react-dom@^18.0.0:
73737366
loose-envify "^1.1.0"
73747367
scheduler "^0.21.0"
73757368

7376-
react-error-boundary@^2.2.2:
7377-
version "2.2.2"
7378-
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-2.2.2.tgz#ed2c2f0770edb3223d71ffc18ac29546ebae903b"
7379-
integrity sha512-P6gKUS1eTTYIWJKyjhIH5MZzgXbI5lrAL0BkIMpHZaaen+ZPaEfZrdnnXILUqDFzI+WwIPDesyzQvhRbxuvjcg==
7369+
react-error-boundary@^3.1.4:
7370+
version "3.1.4"
7371+
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
7372+
integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
73807373
dependencies:
7381-
"@babel/runtime" "^7.9.6"
7374+
"@babel/runtime" "^7.12.5"
73827375

73837376
react-is@^16.12.0:
73847377
version "16.13.1"

0 commit comments

Comments
 (0)