Graphql-code-generator: Apollo client 3 support

[JClackett]

With the new apollo client 3 beta release, react hooks are now included by default, along with the gql tag. Apollo are deprecating the HOC's + Components so can the default config reflect this when apollo client is out of beta? Also the types used from @apollo/react-common can be used from @apollo/client as well.

Currently setting the hooksImportFrom to @apollo/client works for now.

An issue i ran into is if i try and use this across my app:

import { gql } from "@apollo/client"

My queries aren't picked up. However if I use the graphql-tag package, it works?

Thanks!

[dotansimha]

Currently the root package of Apollo exports gql and also hooks, I'm not sure what would be the right way to export it.

I think @kamilkisiela already has issues with it, because the general package of apollo-client now depends on React (see https://github.com/apollographql/apollo-client/issues/5532).

Anyway, I added this import to list of valid imports in graphql-tag-pluck so now it will detect this gql identifier. We can now gradually support Apollo Client 3 while it's still in beta, and change the behaviour of the codegen and introduce breaking changes when it will be released.

[kamilkisiela]

I think let's wait for 2-3 days, maybe they will address that issue and move react under @apollo/react or the non-react parts under @apollo/client/common. I prefer the first option...but we will see what happens.

[grancalavera]

I'm having a somehow related issue while trying to generate code for Apollo Client 3 using hooks. I can make it work by changing cogegen.yml to get gql from @apollo/client:

[...]
generates:
  [...]
    config:
      [...]
      gqlImport: "@apollo/client#gql"

And then manually changing the imports in the generated code from this:

import { gql } from "@apollo/client";
import * as ApolloReactCommon from "@apollo/react-common";
import * as ApolloReactHooks from "@apollo/react-hooks";

... to this:

import { gql } from "@apollo/client";
import * as ApolloReactCommon from "@apollo/client";
import * as ApolloReactHooks from "@apollo/client";

So far I've only tested a simple query, but it seems all the APIs are compatible. I'm using:

@apollo/[email protected]

So maybe adding an option to generate something like this would help testing:

import * as ApolloClientCommon from "@apollo/client"

... and then generate references to ApolloClientCommon in the generated code. I have not looked at the code generator implementation, so I'm completely ignorant of how hard would this be.

[ardatan]

@grancalavera Until it gets fixed, you can use these configuration fields for react-apollo plugin;
https://graphql-code-generator.com/docs/plugins/typescript-react-apollo#apolloreactcommonimportfrom-string-default-value-apollo-react-common

apolloReactCommonImportFrom: @apollo/client
apolloReactComponentsImportFrom: @apollo/client
apolloReactHocImportFrom: @apollo/client
apolloReactHooksImportFrom: @apollo/client

[dotansimha]

Arda implemented it in: https://github.com/dotansimha/graphql-code-generator/pull/2969

[jgoux]

Hello all,

I'm a little confused, is the original issue solved yet?

An issue i ran into is if i try and use this across my app:
import { gql } from "@apollo/client"
My queries aren't picked up. However if I use the graphql-tag package, it works?

Because I tried the last release and graphql-codegen isn't detecting my gql queries as well when I import it from @apollo/client (so no codegen at all).

@ardatan solved a related issue once the code is generated.

Thanks for this awesome piece of software! 🌟

[dotansimha]

Available in 1.9.0

[david-golightly-leapyear]

It's nice that this change is forward-thinking, however, upgrading to 1.9.1 broke my codegen and I had to override using the config mentioned by @ardatan to point back to the current version of Apollo Client.

I don't think it's a good policy for a production library to automatically depend on a beta release of another library. Until apollo-client 3 is officially released, I would suggest the default should remain to depend on the latest production version of 2.x, with the option to opt-in to an upgrade of @apollo/client v3 using the config until then.

[devjones]

If you're using Apollo 3, add the following to your config file. Otherwise it is assuming you're on Apollo 2 and use the old imports.

      config: {
        reactApolloVersion: 3
      }

[dotansimha]

v2 of the typescript-react-apollo plugin now supports apollo-client v3 by default, and generates hooks only by default.

[github0013]

https://graphql-code-generator.com/docs/plugins/typescript-react-apollo

generates:
path/to/file.ts:
 plugins:
   - typescript
   - typescript-operations
   - typescript-react-apollo
 config:
   reactApolloVersion: 2 # or 3