Graphql-code-generator: @apollo/react-common support

[OneCyrus]

Is your feature request related to a problem? Please describe.
please add support for @apollo/react-common (react-apollo 3). currently the generated types don't work with anymore.

Describe the solution you'd like
generated types which work with the new @apollo/react-common package. HOC, Components and Hooks.

Describe alternatives you've considered
there's no alternative.

Additional context
@apollo/react-common changes some types so there are breaking changes. probably it's just a different mapping to the new types.

[dotansimha]

Hi @OneCyrus !
I'm not sure, but I think this PR solves it: https://github.com/dotansimha/graphql-code-generator/pull/2077
You can try it with 1.3.1-alpha-d928e0d7.72 because it's not released yet.

[OneCyrus]

ah ok. that looks like a start. from overlooking it seems to be incomplete. will give this a try and report my findings.

[dotansimha]

@OneCyrus Thanks, waiting for your update on the missing features :)

[OneCyrus]

just tried the alpha with the following config:

generates: {
    "./src/shared/api/api.tsx": {
      config: {
        resolvers: false,
        noNamespaces: true,
        reactApolloVersion: 3,
        reactApolloImportFrom: "@apollo/react-hooks",
        withHooks: true,
        withHOC : true,
        withComponent: true
      },
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo",
        "typescript-compatibility"
      ]
    }
  }
}; 

and here are the thins which i needed to do:

1. replace imports

replace

import * as ReactApollo from "@apollo/react-hooks";
import * as ReactApolloHooks from "react-apollo-hooks";

with

import { Query, QueryComponentOptions, Mutation, MutationComponentOptions } from "@apollo/react-components";
import { withQuery, withMutation, MutateProps, OperationOption, DataProps } from "@apollo/react-hoc";
import { MutationFunction } from "@apollo/react-common";
import { useMutation, MutationHookOptions, QueryHookOptions, useQuery } from "@apollo/react-hooks";

2. replace types/strings

i replaced the following strings with new values

| old value|new value|
|-----------|-------------|
|ReactApollo. | "" (nothing)|
|ReactApolloHooks. | "" (nothing)|
|MutationProps | MutationComponentOptions|
|QueryProps | QueryComponentOptions|

3. change generics of QueryHookOptions

the generic of QueryHookOptions requires TData type now. currently it only has TVariables.

e.g.

QueryHookOptions<GetClientImacQueryVariables>
-> QueryHookOptions<GetClientImacQuery, GetClientImacQueryVariables>

that's about it

[dotansimha]

Thank you so much @OneCyrus ! I'll take a look soon :)

[ardatan]

Until @apollo/react-common's stable version is released, you can use the following alpha version;

 - @graphql-codegen/typescript-react-apollo => 1.4.1-alpha-3b1e744b.8+3b1e744b

[OneCyrus]

thanks, I'll give this a try

[dotansimha]

Available in 1.5.0 🎉

[zamiang]

Having trouble using react-apollo 2 now. Even customizing with

      reactApolloVersion: 2
      apolloReactHocImportFrom: 'react-apollo'
      apolloReactComponentsImportFrom: 'react-apollo'
      apolloReactCommonImportFrom: 'react-apollo'

Getting incorrect types since MutationProps changed to MutationComponentOptions and QueryProps changed to QueryComponentOptions.

[ardatan]

@zamiang See here;
https://github.com/dotansimha/graphql-code-generator/pull/2182#issuecomment-519202681