QueryClientProvider type issue after upgrading to React 18

[arunmmanoharan]

Describe the bug

When I do a npm run build, I get a type error.

React.FC should accept children by default. Is it a react error or a react-query bug?

Your minimal, reproducible example

export declare const QueryClientProvider: React.FC;

Steps to reproduce

Upgrade app to react 18, both package and types and do a build.

Expected behavior

Build should compile properly.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 10, node 16

react-query version

3.34.19

TypeScript version

4.6.3

Additional context

No response

[mustafaabobakr]

Any updates to why is this ?
all components with children has same error even its React.FC type!

[arunmmanoharan]

Because react changed how FunctionComponent is defined.

v18: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L510

v17: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L542

in v18, FunctionComponent doesnt have any relationship with PropsWithChildren.

[mustafaabobakr]

Because react changed how FunctionComponent is defined.

v18: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L510

v17: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L542

in v18, FunctionComponent doesnt have any relationship with PropsWithChildren.

As a workaround I did this

import "react";

declare module "react" {
  export type FC<P = {}> = FunctionComponent<P>;
  export interface FunctionComponent<P = {}> {
      (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
      propTypes?: WeakValidationMap<P> | undefined;
      contextTypes?: ValidationMap<any> | undefined;
      defaultProps?: Partial<P> | undefined;
      displayName?: string | undefined;
  }
}

in index.d.ts

and everything worked fine. lol

[arunmmanoharan]

@mustafaabobakr Did it even work even if the error is coming from a 3rd party component?In my case, the error occurs with react-query and me adding the above code in index.d.ts is not fixing it.

[mustafaabobakr]

@a2441918
Please, Join this Twitter discussion if you like

https://twitter.com/mustafaabobakr_/status/1512176988353703945

[arunmmanoharan]

@mustafaabobakr Where does your index.d.ts sit? In the src folder?

[mustafaabobakr]

@a2441918 root folder

[latin-1]

For anyone who is looking for a less aggressive workaround:

declare module "react-query/types/react/QueryClientProvider" {
  interface QueryClientProviderProps {
    children?: ReactNode;
  }
}

[mustafaabobakr]

That "aggressive" workaround is also for React.FC components

Either that or downgrade to v17 types.

https://twitter.com/mustafaabobakr_/status/1512176988353703945?t=92vWtLsOH3RnNR7uuYuTCA&s=19

[jafin]

If you did upgrade to the @types/react v18 I submitted a PR for review, if you are after a quick fix and use NPM (sorry not sure for pnpm or yarn) try:

Edit node_modules\react-query\types\react\QueryClientProvider.d.ts
amend:

React.FC<QueryClientProviderProps>;

to

React.FC<React.PropsWithChildren<QueryClientProviderProps>>;

then patch it

$ npx patch-package react-query

I'm unsure if there are other components needing similar changes, that was the only component I use from react-query.

[y0ngha]

I had the same problem.
In other projects, I was blaming myself for why not because everything works well.

I was supposed to use react@^17.0.2 for package.json.
I checked the lock file and found that types/react is up to 18.0.0.

It is written 17.0.2 in package.json, but if you get a childen type error in QueryClientProvider, please refer to it.

[xg4]

react-query 3.x only supports React 16.8 || 17.x . You can also see it in package.json.
If you want to use React 18.x, please wait for react-query 4.x

[TkDodo]

react-query 3.x only supports React 16.8 || 17.x . You can also see it in package.json.
If you want to use React 18.x, please wait for react-query 4.x

This ⬆️

please use v4 beta - the types for QueryClientProvider have been fixed there already (coincidentally I must say - I just didn't like React.FC in the first place, so I removed it), and I will fix the other usages of React.FC as well.

I have no plans of changing this for v3 tough, as v3 is not meant to be used with react18. Concurrent features can't work properly without useSyncExternalStore, which we are using in v4 beta.

[symbiont-matthew-pirocchi]

@TkDodo Thanks for the clarification. Is v4 stable imminent (coming in the next few days/weeks), or should we expect to wait for a while?

[TkDodo]

Is v4 stable imminent (coming in the next few days/weeks), or should we expect to wait for a while?

we don't have any plans to make more breaking api changes. if another api change happens, it will likely not be a big one, and potentially around hydration and SSR, because we haven't fully figured that out.

so yes, I'd consider the api stable.

regarding the code itself: if no one tries out the beta, whatever we currently have will just become v4.0. So, if you are using react 18.0.0 already, your best bet is to just use v4-beta right now :)

[sharpSteff]

4.0.0-beta.3 worked for me

[sonterix]

Confirm work on @4.0.0-beta.3
Waiting for stable v4.0 🤞🏻

[brucePedroGomes]

I have the same problem...

"react": "17.0.2",
"react-dom": "17.0.2",
"react-query": "^3.34.20"

[xg4]

I have the same problem...

"react": "17.0.2", "react-dom": "17.0.2", "react-query": "^3.34.20"

It looks like @types/react was upgraded to 18.x

[kukudeshiyi]

For anyone who is looking for a less aggressive workaround:

declare module "react-query/types/react/QueryClientProvider" {
  interface QueryClientProviderProps {
    children?: ReactNode;
  }
}

why this can not work for me？i added this code to a global DTS file, and the path of module is right.