React-apollo: Type 'typeof Query' is not a constructor function type.

[bduff9]

Intended outcome:

Upgraded to v3.0.0 in my typescript React app, and my understanding of the changelog beyond the breaking changes was things should continue to work as before. However, we have patterns all over our app like the below that now throw this error after updating to v3.0.0.

export class GetCurrentUserQuery extends Query<GetCurrentUserData> {
    public static defaultProps = {
        fetchPolicy: 'cache-and-network',
        query: gql(getCurrentUser),
    };
}

Actual outcome:

The project now cannot be built due to errors that Query is no longer a constructor.

Type 'typeof Query' is not a constructor function type. TS2507

I do see that Query was changed to a function instead of class, however, I am wondering if this was intentional or how I should best fix all these issues in my project as we would really like to utilize hooks going forward as they will drastically simplify our code.

How to reproduce the issue:

Just have a component like the one pasted above when running react-apollo v3.0.0.

Version

System:
OS: macOS 10.14.5
Binaries:
Node: 10.14.2 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.100
Safari: 12.1.1
npmPackages:
apollo-client: 2.6.3 => 2.6.3
apollo-link: 1.2.12 => 1.2.12
apollo-link-state: 0.4.2 => 0.4.2
react-apollo: 3.0.0 => 3.0.0

[jayscheidt]

Pardon my functional components, but I was able to resolve this issue by updating

class GetCurrentUserQuery extends Query<GetCurrentUserQuery> { }

export const CurrentUser: React.FC = () => (
  <GetCurrentUserQuery query={gql(getCurrentUser)} fetchPolicy={'cache-and-network'} >
    {({ data }) => {
      return <div />
    }}
  </GetCurrentUserQuery>
)

with

export const CurrentUser: React.FC = () => (
  <Query<GetCurrentUserQuery> query={gql(getCurrentUser)} fetchPolicy={'cache-and-network'} >
    {({ data }) => {
      return <div />
    }}
  </Query>
)

Hopefully that can help get you started.

It would be nice if the typescript documentation was updated to 3.0

[michaelchiche]

@hwillson is this a bug or an unexpected breaking change?

[bduff9]

Thanks @jayscheidt that was very helpful. This is what I ended up with for others who might need it:

export const GetCurrentUserQuery = ({ children }: ApolloProps): JSX.Element => (
    <Query<GetCurrentUserData>
        query={gql(getCurrentUser)}
        fetchPolicy={'cache-and-network'}
    >
        {children}
    </Query>
);

...though just converting to hooks where easy is also pretty nice especially with custom hooks. Another note, I know in the announcement it looks like Typescript support was improved, but I am seeing a couple issues like definitions removed such as MutationFn. I know MutationFunc was removed according to the breaking changes but did not see any comment on MutationFn, which is another thing causing our build to fail.

Maybe TS support just needs more work in v3.0.0 but wanted to report this so others could see as well. Thanks!

[joshalling]

@bduff9 It looks like MutationFn was replaced with MutationFunction.

[patricknick]

@hwillson will the exports syntax still be supported in future or should we update our codebase to ...>? I'd like to use the apollo hooks but with all the existing queries breaking because of typings I rather wait for clarification. 🙂

[ralmo]

Same problem here and I'm also waiting to migrate due to this confusion.

Documentation seems to be update for hooks and <Query<...>...> syntax but is also still saying:

Note: It is also possible to extend a class with the component as follows: class AllPeopleQuery extends Query {}. This class can be exported and used in a component tree with full TypeScript support

[hwillson]

This was an intended breaking change, but it was unfortunately missed when putting together the breaking changes section of the changelog 😞. We converted Query, Mutation and Subscription to be functional components, so they could effectively just wrap calls to the new hooks. This helped reduce our maintenance overhead and is in-line with the direction the React team is headed (ie. hooks are the future).

@jayscheidt's workaround in https://github.com/apollographql/react-apollo/issues/3327#issuecomment-519650960 is a great stop gap, but we definitely recommend moving to the new hooks whenever possible. We're in the process of merging React Apollo into Apollo Client, so we can build new functionality that involves a deeper integration between the 2 projects (and we can help get away from managing similar problems in 2 separate repos). When the merge into Apollo Client is complete however (will be released in Apollo Client 3), Apollo Client will only provide hooks support. The HOC and render prop components will still be supported, but they will be separate packages outside of the upcoming @apollo/client package (which will include hooks support by default).

To help address this issue immediately though, I'll:

• Get the breaking changes section in the changelog updated
• Update the section in the docs that says this is still possible (thanks @ralmo)

As another potential workaround (if https://github.com/apollographql/react-apollo/issues/3327#issuecomment-519650960 doesn't help), you could consider using [email protected] for render prop components, and @apollo/react-hooks as you gradually transition over to hooks. You won't be able to share the same ApolloProvider between RA 2 and RA 3 though, since they leverage their own internal and separate context, but you could set things up to use an ApolloProvider instance from [email protected] and an ApolloProvider instance from @apollo/react-hooks.

Sorry about this! 😳

[hwillson]

The changelog has been updated in https://github.com/apollographql/react-apollo/pull/3423, and the docs have been updated in https://github.com/apollographql/apollo-client/pull/5180. Thanks all - and sorry for the trouble!