Graphql-code-generator: Unused imports generated (3rd issue about this)

[jedmao]

Describe the bug

TSX files generated from @graphql-codegen/typescript-react-apollo are including at least one unused import at the top:

import gql from 'graphql-tag'

This leads to the following error:

```Failed to compile
'gql' is declared but its value is never read. TS6133

1 | import gql from 'graphql-tag'
| ^

## To Reproduce
Steps to reproduce the behavior:

### GraphQL schema

```graphql
type Query {
    id: ID
    hello: String
}

GraphQL operations

query HomeQuery {
    hello
}

codegen.yml

overwrite: true
schema: 'server/src/schemas/**/*.gql'
documents: 'src/**/*.{ts,tsx}'
generates:
  src/models/generated.tsx:
    - typescript
    - typescript-operations
    - typescript-react-apollo
  server/models.ts:
    - typescript
    - typescript-resolvers

Expected behavior

Unused imports are not included in the src/models/generated.tsx file.

Environment

• OS: macOS Mojave (Version 10.14.5)
• NodeJS: v10.15.0

    "@graphql-codegen/cli": "^1.2.0",
    "@graphql-codegen/introspection": "^1.2.0",
    "@graphql-codegen/typescript": "^1.2.0",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.2.0",
    "@graphql-codegen/typescript-operations": "^1.2.0",
    "@graphql-codegen/typescript-react-apollo": "^1.2.0",
    "@graphql-codegen/typescript-resolvers": "^1.2.0",

Additional context

This issue had been fixed previously in this PR. Perhaps a regression?

Similar issues

• https://github.com/dotansimha/graphql-code-generator/issues/744
• #1841

[ardatan]

@jedmao Could you share the generated file, because gql should be used if you have operations inside your project?

[dotansimha]

As @ardatan said, can you please add your complete generated file? It seems like your documents are not getting loaded, because the gql import should be used per each documents.

[jedmao]

Here's the generated file in src/models/generated.tsx:

import gql from 'graphql-tag'
export type Maybe<T> = T | null
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
    ID: string
    String: string
    Boolean: boolean
    Int: number
    Float: number
}

export type Query = {
    __typename?: 'Query'
    id?: Maybe<Scalars['ID']>
    hello?: Maybe<Scalars['String']>
}

[jedmao]

And here is a branch where you can reproduce the problem with npm start.

https://github.com/jedmao/tsx/tree/graphql-code-generator

[dotansimha]

@jedmao It looks like your documents aren't loaded, so they are not being added to the output file (and that's why the import is unused).
You are using documents: 'src/**/*.{ts,tsx}', but I couldn't find any documents that matches this glob pattern.

Also, I noticed that you are using relay - our typescript-react-apollo is for Apollo-Client and react-apollo, not for relay (which has it's own codegen and compiler, that works in a different way and approach).

[jedmao]

Thanks @dotansimha:

1. Here's a document that matches the glob pattern.
2. Where is Relay's own codegen and compiler? Oh, you mean it's built-in to Relay? I wasn't aware of that tidbit. I'll have to investigate more.

[dotansimha]

@jedmao
Regarding 1 - the document is not getting loaded because you are using a different graphql tag for your operation. If you are using a babel-plugin-relay/macro, then you should let the codegen know, otherwise it can't guess it.
Try to add the following to your codegen.yml:

pluckConfig:
  modules: 
    - name: "babel-plugin-relay/macro"
      identifier: "graphql"

This way, the codegen knows how to find your documents in your code files.

Regarding 2 - The files under __generated__ looks like a relay compiler output, and also QueryRenderer is a Relay method. Your entire project seems like a Relay project, and not Apollo.

[jedmao]

Yes, I am using Relay. I'm also using the macro. Your comments were extremely helpful. Thanks!

[ktrzos]

Hello,
I've got similar problem. Generator is adding same import which is not used in the rest of generated types.

codegen.yml

overwrite: true
watch: true
schema: "config/graphql/schema.graphql"
generates:
  assets/js/generated/types.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  assets/js/generated/graphql.schema.json:
    plugins:
      - "introspection"
    config:
      minify: false

schema.graphql

type Query {
  userList: [User!]!
  user(id: Int!): User!
}

type User {
  id: Int!
  username: String!
}

types.tsx

import gql from 'graphql-tag';
export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string,
  String: string,
  Boolean: boolean,
  Int: number,
  Float: number,
};

export type Query = {
   __typename?: 'Query',
  userList: Array<User>,
  user: User,
};


export type QueryUserArgs = {
  id: Scalars['Int']
};

export type User = {
   __typename?: 'User',
  id: Scalars['Int'],
  username: Scalars['String'],
};

[dotansimha]

@ktrzos You are using typescript-operations and typescript-react-apollo without specifying any documents:, so you can either remove those plugins or add your documents.

If someone else is experiecing those ununsed imports with the latest codegen, it's always easier to add TSLint ignore comments with add plugin.

[ktrzos]

@dotansimha

I've added documents config:

documents:
  - "assets/**/*.{ts,tsx}"

Created a component with:

import { gql } from 'apollo-boost';
import { User } from '../../generated/types';

/* ... */

const USERS = gql`
  {
    userList {
      id
      username
    }
  }
`;

const SomeComponent: React.FC<Props> = (props: Props) => {
  const { data } = useQuery<Array<User>>(USERS);
}

and generated types.tsx also having this unused import:

import gql from 'graphql-tag';
export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string,
  String: string,
  Boolean: boolean,
  Int: number,
  Float: number,
};

export type Query = {
   __typename?: 'Query',
  userList: Array<User>,
  user: User,
};


export type QueryUserArgs = {
  id: Scalars['Int']
};

export type User = {
   __typename?: 'User',
  id: Scalars['Int'],
  username: Scalars['String'],
};

export type Unnamed_1_QueryVariables = {};


export type Unnamed_1_Query = (
  { __typename?: 'Query' }
  & { userList: Array<(
    { __typename?: 'User' }
    & Pick<User, 'id' | 'username'>
  )> }
);

If someone else is experiecing those ununsed imports with the latest codegen, it's always easier to add TSLint ignore comments with add plugin.

Could you describe me how to do it, please?

[dotansimha]

Sure, add a dependency for @graphql-codegen/add, and use something like this:

generates:
  ./types.tsx:
    plugins:
      - add: "/* tslint:disable */"
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"