Graphql-code-generator: Unable to use with create-react-app

[hmeerlo]

Describe the bug
I generated a react app with create-react-app 3.0. This has a predefined ESLint config which uses the 'import/first' rule. This defines that imports must always be a the top of the file. But the generated code that I get from graphql-code-generator contains imports that are in the middle of the file. Therefore the app can not compile.

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

Not really relevant

1. My GraphQL operations:

Not really relevant

1. My codegen.yml config file:

schema: http://localhost:8080/graphql
documents:
  - ./src/**/*.tsx
  - ./src/**/*.ts
overwrite: true
generates:
  ./src/types.d.tsx:
    plugins:
      - typescript-common
      - typescript-client
      - typescript-react-apollo
    config:
      withHooks: true
      withHOC: false
      withComponent: false

Expected behavior
I expect the import statements to be at the top of the file.

Environment:

• OS: MacOs
• @graphql-codegen/...: 1.1.1
• NodeJS:

Additional context
Part of the generated code that is wrong:

// ====================================================
// Documents
// ====================================================

export namespace Login {
  export type Variables = {
    email: string;
    password: string;
  };

  export type Mutation = {
    __typename?: "Mutation";

    login: Maybe<Login>;
  };

  export type Login = {
    __typename?: "LoginOutput";

    user: Maybe<User>;
  };

  export type User = {
    __typename?: "User";

    id: string;
  };
}

import gql from "graphql-tag"; // <-----------
import * as ReactApolloHooks from "react-apollo-hooks"; // <-----------
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export const LoginDocument = gql`
  mutation login($email: String!, $password: String!) {
    login(input: { email: $email, password: $password }) {
      user {
        id
      }
    }
  }
`;

[hallettj]

In case it is helpful I will describe my workaround for this issue. I use the @graphql-codegen/add plugin to insert an /* eslint-disable */ line in the generated file which causes eslint to skip checking the file. The configuration looks like this:

schema: http://localhost:8080/graphql
documents:
  - ./src/**/*.tsx
  - ./src/**/*.ts
overwrite: true
generates:
  ./src/types.d.tsx:
    plugins:
      - add: '/* eslint-disable */'
      - typescript-common
      - typescript-client
      - typescript-react-apollo
    config:
      withHooks: true
      withHOC: false
      withComponent: false

The relevant added line is - add: '/* eslint-disable */ in the plugins: section.

[hmeerlo]

Thanks @hallettj that is exactly the kind of workaround I was looking for!

[hmeerlo]

Hmm, now it stops at this error:

Cannot find namespace 'ReactApollo'.  TS2503

    544 |   }
    545 | `;
  > 546 | export type LoginMutationFn = ReactApollo.MutationFn<
        |                               ^
    547 |   LoginMutation,
    548 |   LoginMutationVariables
    549 | >;

There is no import for ReactApollo in the generated code, I guess there should have been an import?

[hmeerlo]

Apparently this happens when you only enable 'withHooks'

[ardatan]

@hmeerlo Could you try with the following version?

 - @graphql-codegen/typescript-react-apollo => 1.1.2-alpha-842aaeb8.10+842aaeb8

[hmeerlo]

@ardatan Yes that version works correctly with only 'withHooks' enabled!

[LiorCohen]

Having the same issue with the incorrectly named import. Any ETA on release?
TIA

[dotansimha]

Fixed in 1.1.3 🎉

[mehmetnyarar]

@dotansimha I still get the error @1.1.3.

[hallettj]

@mehmetnyarar which error? The eslint error that says "imports must be at the top of the file" or "Cannot find namespace 'ReactApollo'"?

[mehmetnyarar]

@hallettj Import in body of module; reorder to top import/first. However, it works for the below config, similar to what you've suggested earlier.

schema: http://localhost:4000/graphql
documents: src/graphql/**/*.graphql
overwrite: true
generates:
  src/generated/graphql.tsx:
    plugins:
      - add: '/* eslint-disable */'
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      withComponent: true
      withHooks: true
      withHOC: false

[dotansimha]

@mehmetnyarar Ignoring generated files in your lint configuration is a good idea, because we can't handle every possible option of linters.

[hallettj]

@dotansimha I want to humbly suggest that adding /* eslint-disable */ to templates would be worthwhile for a couple of reasons.

First, it will be common for people to combine GraphQL Code Generator with create-react-app. I don't have usage statistics; but in addition to being very convenient create-react-app is recommended in React's official getting started guide (expand the "Optional: Instructions" to see) . One of the trade-offs is that users cannot change the bundled ESLint configuration which makes it difficult for users to exclude specific files from linting.

Second, Javascript linting is not especially fragmented. According to a survey the majority of programmers use ESLint (60%), with TSLint coming in second (10%). Other linters seem to be much less used compared to ESLint, and their usage is trending downward. I would expect GraphQL Code Generator users to be biased toward TSLint due to the Typescript angle. But the TSLint maintainers are in the process of deprecating TSLint, and moving its functionality to ESLint.

[dotansimha]

@hallettj I agree that this might become useful. I opened an issue for it: https://github.com/dotansimha/graphql-code-generator/issues/1849

Thank you!

[diegopamio]

I've used the add plugin and indeed I see the additional linter exceptions added to the generated file, but I still cannot compile the project as it gives me the same error.

[dotansimha]

@diegopamio can you please share your codegen version, codegen.yml file and the error you are getting?

[diegopamio]

Now, I've updated to 1.2 and the issue is that it doesn't generates anymore the components! (same happened even in the example in the codegen page). There was any change on 1.2 that needs special update?

[ardatan]

@diegopamio Could you share your codegen.yml file?

[diegopamio]

I've tried with:

overwrite: true
schema: "https://b4yfcutwp8.execute-api.us-east-1.amazonaws.com/dev/graphql"
documents: "./src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    - "typescript-react-apollo"

and with

overwrite: true
schema: "https://b4yfcutwp8.execute-api.us-east-1.amazonaws.com/dev/graphql"
documents: "./src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    - "typescript"
    - "typescript-operations"
    - "typescript-react-apollo"

and any combination in between.

[dotansimha]

@diegopamio it seems like a different issue, can you please open a new issue with as much information as possible (and if you can, a small repo with a reproduction)? Thanks

[diegopamio]

Finally it was a problem of unnamed queries, as soon as I named the query, I got the component generated. Now I'm getting ts errors on the signature of the children function of the provider component, but I think that should be easier to fix. A better documentation would be nice though. If I manage to get it working I may do a PR over the docs to explain how I got it working.