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++

0 commit comments

Comments
 (0)