Skip to content

fix(types): use react 18 types #3482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 8, 2022
Merged

fix(types): use react 18 types #3482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ff2769
fix(types): use react-18 types for development
TkDodo Apr 8, 2022
a9dce09
fix(types): also update react-error-boundary
TkDodo Apr 8, 2022
02e6090
fix(types): remove all usages of React.FC
TkDodo Apr 8, 2022
708ca6e
fix(types): fix context typings
TkDodo Apr 8, 2022
c49f2e2
fix(types): fix some typings of react
TkDodo Apr 8, 2022
58e2dae
fix(types): better fix for useQueries tests
TkDodo Apr 8, 2022
effcf06
fix(types): make hydrate children optional
TkDodo Apr 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@
"@types/jest": "^26.0.4",
"@types/jscodeshift": "^0.11.3",
"@types/node": "^16.11.10",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"babel-eslint": "^10.1.0",
Expand Down Expand Up @@ -131,7 +131,7 @@
"react-17": "npm:react@^17.0.2",
"react-dom": "^18.0.0",
"react-dom-17": "npm:react-dom@^17.0.2",
"react-error-boundary": "^2.2.2",
"react-error-boundary": "^3.1.4",
"replace": "^1.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.68.0",
Expand Down
2 changes: 1 addition & 1 deletion src/devtools/useLocalStorage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function useLocalStorage<T>(
}, [defaultValue, key])

const setter = React.useCallback(
updater => {
(updater: any) => {
setValue(old => {
let newVal = updater

Expand Down
2 changes: 1 addition & 1 deletion src/persistQueryClient/tests/PersistQueryClientProvider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ describe('PersistQueryClientProvider', () => {

return (
<div>
<h1>{state.data}</h1>
<h1>{String(state.data)}</h1>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@artysidorenko I think the react 18 type upgrades have shown an issue with the types of useQueries: Here, the type of state.data is inferred to string | Promise<string> | undefined, which cannot be rendered.

I will create a separate issue for this with a failing test case, just to let you know :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

follow-up issue: #3483

<h2>fetchStatus: {state.fetchStatus}</h2>
</div>
)
Expand Down
9 changes: 3 additions & 6 deletions src/reactjs/Hydrate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,10 @@ export function useHydrate(state: unknown, options: HydrateOptions = {}) {
export interface HydrateProps {
state?: unknown
options?: HydrateOptions
children?: React.ReactNode
}

export const Hydrate: React.FC<HydrateProps> = ({
children,
options,
state,
}) => {
export const Hydrate = ({ children, options, state }: HydrateProps) => {
useHydrate(state, options)
return children as React.ReactElement<any>
return children as React.ReactElement
}
4 changes: 2 additions & 2 deletions src/reactjs/QueryErrorResetBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ export interface QueryErrorResetBoundaryProps {
| React.ReactNode
}

export const QueryErrorResetBoundary: React.FC<QueryErrorResetBoundaryProps> = ({
export const QueryErrorResetBoundary = ({
children,
}) => {
}: QueryErrorResetBoundaryProps) => {
const value = React.useMemo(() => createValue(), [])
return (
<QueryErrorResetBoundaryContext.Provider value={value}>
Expand Down
4 changes: 2 additions & 2 deletions src/reactjs/tests/QueryResetErrorBoundary.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ describe('QueryErrorResetBoundary', () => {
const key = queryKey()

function Page() {
const { data, refetch, status, fetchStatus } = useQuery(
const { data, refetch, status, fetchStatus } = useQuery<string>(
key,
async () => {
throw new Error('Error')
Expand Down Expand Up @@ -431,7 +431,7 @@ describe('QueryErrorResetBoundary', () => {
let fetchCount = 0

function Page() {
const { data } = useQuery(
const { data } = useQuery<string>(
key,
async () => {
fetchCount++
Expand Down
5 changes: 3 additions & 2 deletions src/reactjs/tests/ssr-hydration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import ReactDOM, { Root } from 'react-dom'
import ReactDOM from 'react-dom'
import ReactDOMTestUtils from 'react-dom/test-utils'
import ReactDOMServer from 'react-dom/server'
// eslint-disable-next-line import/no-unresolved -- types only for module augmentation
Expand All @@ -18,8 +18,9 @@ const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'

const ReactHydrate = (element: React.ReactElement, container: Element) => {
if (isReact18()) {
let root: Root
let root: any
ReactDOMTestUtils.act(() => {
// @ts-expect-error
root = ReactDOM.hydrateRoot(container, element)
})
return () => {
Expand Down
2 changes: 1 addition & 1 deletion src/reactjs/tests/suspense.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -901,7 +901,7 @@ describe("useQuery's in Suspense mode", () => {
const queryKeys = '1'
const [enabled, setEnabled] = React.useState(false)

const result = useQuery(
const result = useQuery<string>(
[queryKeys],
async () => {
await sleep(10)
Expand Down
14 changes: 8 additions & 6 deletions src/reactjs/tests/useQueries.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ describe('useQueries', () => {
return (
<div>
<div>
data1: {result[0].data ?? 'null'}, data2: {result[1].data ?? 'null'}
data1: {String(result[0].data ?? 'null')}, data2:{' '}
{String(result[1].data ?? 'null')}
</div>
</div>
)
Expand Down Expand Up @@ -108,7 +109,8 @@ describe('useQueries', () => {
return (
<div>
<div>
data1: {result[0].data ?? 'null'}, data2: {result[1].data ?? 'null'}
data1: {String(result[0].data ?? 'null')}, data2:{' '}
{String(result[1].data ?? 'null')}
</div>
<div>isFetching: {String(isFetching)}</div>
<button onClick={() => setCount(prev => prev + 1)}>inc</button>
Expand Down Expand Up @@ -204,8 +206,8 @@ describe('useQueries', () => {
return (
<div>
<div>
data1: {result[0]?.data ?? 'null'}, data2:{' '}
{result[1]?.data ?? 'null'}
data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
{String(result[1]?.data ?? 'null')}
</div>
<div>isFetching: {String(isFetching)}</div>
<button onClick={() => setSeries2(3)}>setSeries2</button>
Expand Down Expand Up @@ -259,8 +261,8 @@ describe('useQueries', () => {
return (
<div>
<div>
data1: {result[0]?.data ?? 'null'}, data2:{' '}
{result[1]?.data ?? 'null'}
data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
{String(result[1]?.data ?? 'null')}
</div>
<div>isFetching: {String(isFetching)}</div>
<button onClick={() => setEnableId1(false)}>set1Disabled</button>
Expand Down
16 changes: 8 additions & 8 deletions src/reactjs/tests/useQuery.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ describe('useQuery', () => {
if (state.isLoadingError) {
expectType<undefined>(state.data)
expectType<Error>(state.error)
return <span>{state.error}</span>
return <span>{state.error.message}</span>
}

expectType<string>(state.data)
Expand Down Expand Up @@ -2772,19 +2772,19 @@ describe('useQuery', () => {
const key = queryKey()

function Page() {
const { status, error } = useQuery<undefined, string>(
const { status, error } = useQuery<undefined, Error>(
key,
() => Promise.reject('Remote Error'),
() => Promise.reject(new Error('Remote Error')),
{
retry: false,
useErrorBoundary: err => err !== 'Local Error',
useErrorBoundary: err => err.message !== 'Local Error',
}
)

return (
<div>
<h1>{status}</h1>
<h2>{error}</h2>
<h2>{error?.message ?? ''}</h2>
</div>
)
}
Expand All @@ -2795,7 +2795,7 @@ describe('useQuery', () => {
fallbackRender={({ error }) => (
<div>
<div>error boundary</div>
<div>{error}</div>
<div>{error.message}</div>
</div>
)}
>
Expand All @@ -2812,7 +2812,7 @@ describe('useQuery', () => {
let count = 0

function Page() {
const result = useQuery(
const result = useQuery<number, string>(
key,
async () => {
count++
Expand Down Expand Up @@ -2860,7 +2860,7 @@ describe('useQuery', () => {
let count = 0

function Page() {
const result = useQuery(
const result = useQuery<number, string>(
key,
async () => {
count++
Expand Down
5 changes: 4 additions & 1 deletion src/reactjs/tests/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,12 @@ export const expectType = <T,>(_: T): void => undefined
export const expectTypeNotAny = <T,>(_: 0 extends 1 & T ? never : T): void =>
undefined

export const Blink: React.FC<{ duration: number }> = ({
export const Blink = ({
duration,
children,
}: {
duration: number
children: React.ReactNode
}) => {
const [shouldShow, setShouldShow] = React.useState<boolean>(true)

Expand Down
1 change: 1 addition & 0 deletions src/reactjs/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
MutateFunction,
} from '../core/types'
import type { QueryClient } from '../core/queryClient'
import * as React from 'react'

export interface ContextOptions {
/**
Expand Down
33 changes: 13 additions & 20 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2274,13 +2274,6 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.9.6":
version "7.9.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/template@^7.1.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
Expand Down Expand Up @@ -3098,10 +3091,10 @@
dependencies:
"@types/react" "^16"

"@types/react-dom@^17.0.11":
version "17.0.11"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
"@types/react-dom@^18.0.0":
version "18.0.0"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.0.tgz#b13f8d098e4b0c45df4f1ed123833143b0c71141"
integrity sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==
dependencies:
"@types/react" "*"

Expand All @@ -3114,10 +3107,10 @@
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/react@^17.0.37":
version "17.0.37"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
"@types/react@^18.0.0":
version "18.0.0"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.0.tgz#4be8aa3a2d04afc3ac2cc1ca43d39b0bd412890c"
integrity sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
Expand Down Expand Up @@ -7373,12 +7366,12 @@ react-dom@^18.0.0:
loose-envify "^1.1.0"
scheduler "^0.21.0"

react-error-boundary@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-2.2.2.tgz#ed2c2f0770edb3223d71ffc18ac29546ebae903b"
integrity sha512-P6gKUS1eTTYIWJKyjhIH5MZzgXbI5lrAL0BkIMpHZaaen+ZPaEfZrdnnXILUqDFzI+WwIPDesyzQvhRbxuvjcg==
react-error-boundary@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
dependencies:
"@babel/runtime" "^7.9.6"
"@babel/runtime" "^7.12.5"

react-is@^16.12.0:
version "16.13.1"
Expand Down