@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: #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;
#2182 (comment)