React-apollo: Typescript TS2322 error with typescript 3.8.2

[pschoffer]

Intended outcome:

After upgrading typescript to 3.8.2 I started to get a compile error:

TS2322: Type '({ data, loading, error }: { data: any; loading: any; error: any; }) => Element' is not assignable to type '(result: QueryResult<any, Record<string, any>>) => Element'.
  Types of parameters '__0' and 'result' are incompatible.
    Type 'QueryResult<any, Record<string, any>>' is not assignable to type '{ data: any; loading: any; error: any; }'.
      Property 'error' is optional in type 'QueryResult<any, Record<string, any>>' but required in type '{ data: any; loading: any; error: any; }'.

I have also asked on Stack Ovverflow first. Good people there mentioned that Typescript ^3.8 is more strict and there might be something you could do to make compiling works.

Here is example usage in my code:

 <Query query={validateTokenQuery}>
                        {({ data, loading, error }) => {

                        }}
 </Query>

Actual outcome:

Project compiles

How to reproduce the issue:

Sorry I wasn't able to reproduce in sandbox. Do you have typescript version of the template there? Maybe that could be easier.

Version

System:
OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
Binaries:
Node: 13.8.0 - /usr/bin/node
npm: 6.13.6 - /usr/bin/npm
Browsers:
Firefox: 72.0.2
npmPackages:
apollo-cache-inmemory: ^1.6.5 => 1.6.5
apollo-client: ^2.6.8 => 2.6.8
apollo-link-context: ^1.0.17 => 1.0.19
apollo-upload-client: ^10.0.0 => 10.0.1
react-apollo: ^3.1.3 => 3.1.3

+

"react-scripts-ts": "^4.0.8",
"typescript": "^3.8.2"

[pschoffer]

BTW I am quite a react, graphql and even frontend newbies. So it might be me missunderstanding stuff. Also, I would be happy to fix this myself, but I guess some pointers would be nice, because of the previous sentence:)

[dumaron]

I'm experiencing the same issue with the current package versions:

"react-scripts": "^3.4.0",
"typescript": "^3.8.2",
"apollo-client": "^2.6.8",
"react-apollo": "^3.1.3"

For what I get from the message the problem is typescript assume error as required after the destructuring in the beginning of the children function. Isn't this a wrong assumption?

Moving the destructuring operation inside the body of the children remove the error in my case:

<Query query={validateTokenQuery}>
    {(result) => {
        const { data, loading, error } = result;
        // ...          
    }}
</Query>

But that's not a solution, in my opinion. Maybe it's a typescript problem?

[ipinlnd]

@pschoffer May i ask what was your previous version of typescript?

[pschoffer]

Sure, I was and still am using 3.7.4.

[eugeneoshepkov]

I can confirm, having the same problem with typescript 3.8.2

[singhvivek2503]

I can confirm, having the same problem with typescript 3.8.2

And in typescript 3.8.3 swell :(

[U-4-E-A]

Has this been fixed? Still occurring on v3.8.3.

[Zrna]

@dumaron solution is correct.
But you also need to return HTML element or null when checking if statements.

This works for me:

<Query query={GET_USER} variables={{ 'user': user }}>
  {
    ((result: any) => {
      const { loading, error, data } = result;

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error</p>;

      return <Profile data={data} />;
    })
  }
</Query>

[gtdeng]

Was using TS v3.8.3; reverted back to v3.6.5 and have no errors now.

[tung-dang]

I still have this problem in typescript 3.9.2. Since our project uses Apollo Query component a lot, I don't want to update all places like the above suggestions. Maybe it's better I need to wait for a fix of this issue. Thanks!

[U-4-E-A]

Any update on this? Same issue with 3.9.5. As @tung-dang said, I don't want to have to update a load of code.