Graphql-code-generator: Missing `import` statements in autogenerated files cause TypeScript errors

[rafeca]

Describe the bug

On v1.7.0, the near-operation-file preset doesn't add the required import statement for the schema types in some situations, causing TypeScript errors.

This seems to happen whenever an operation is not using any schema type directly, but the generator code still inserts Types.Maybe for nullable fields.

This problem has been introduced in v1.7.0.

To Reproduce

Open the following CodeSandbox, where the issue is reproducible: https://codesandbox.io/s/graphql-codegen-issue-template-fbe2g?fontsize=14&module=%2Fsrc%2FgetUser.generated.ts

1. My GraphQL schema:

interface Node {
  id: ID!
}

type User implements Node {
  id: ID!
  login: String!
  name: String
}

type Query {
  user: User
}

1. My GraphQL operations:

query getUser {
  user {
    ...user
  }
}

fragment user on User {
  id
  login
  name
}

1. My codegen.yml config file:

overwrite: true
schema: "schema.graphql"
documents: "src/**/*.graphql"
generates:
  src/graphql-schema-types.generated.ts:
    plugins:
      - typescript
  src/:
    preset: near-operation-file
    presetConfig:
      baseTypesPath: "graphql-schema-types.generated.ts"
    plugins:
      - "typescript-operations"
    config:
      withComponent: false
      withHooks: true

Expected behavior

I expect the generated files to not have any TypeScript error. The getUser.generated.tsx file has the following contents:

import { UserFragment } from './User.generated';
export type GetUserQueryVariables = {};


export type GetUserQuery = (
  { __typename?: 'Query' }
  & { user: Types.Maybe<{ __typename?: 'User' }
    & UserFragment
  > }
);

(notice the missing import * as types from "./graphql-schema-types.generated.ts";).

Environment:

• OS: OSX
• @graphql-codegen v1.7.0
• NodeJS: v12

Additional context

The issue seems to have been caused by https://github.com/dotansimha/graphql-code-generator/pull/2458

[alexkirsz]

Getting the same issue on 1.7.0. Downgrading to 1.6.1 fixed the issue.

_(Hi Rafa!)_

[dotansimha]

Thanks @rafeca !
I'll take a look :)

[dotansimha]

@rafeca @alexkirsz I think I fixed that in: https://github.com/dotansimha/graphql-code-generator/pull/2524
Can you please try it? 1.7.1-alpha-3fad52f3.29

By the way, we've just added a cool service called The Connected Build. We can connect your build system and tests to the codegen's own CI. That way we'll find those things on the PR itself and make sure you are always up to date (https://the-guild.dev/connected-build). This could help up prevent more of those in the future (on top of our current tests)

[rafeca]

Thanks for the quick response @dotansimha 😄

I've just tried 1.7.1-alpha-3fad52f3.29 and I can still reproduce the issue (see codesandbox URL: https://codesandbox.io/s/graphql-codegen-issue-template-fbe2g?fontsize=14&module=%2Fsrc%2FgetUser.generated.ts ).

[dotansimha]

@rafeca It's actually working in sandbox :)

import * as Types from './graphql-schema-types.generated';

import { UserFragment } from './user.generated';
export type GetUserQueryVariables = {};


export type GetUserQuery = (
  { __typename?: 'Query' }
  & { user: Types.Maybe<{ __typename?: 'User' }
    & UserFragment
  > }
);

Make sure to use 1.7.1-alpha-3fad52f3.29, without ^. And clear the file before generating because of caching issues in codesandbox :)

[rafeca]

Oh you're right, I forgot to add the caret on the dependency for the CodeSandbox 🙃

In my local project I'm still getting the same error though, I'm going to try to reproduce it in a codesandbox.

[rafeca]

Ok, here I have a repro: https://codesandbox.io/s/graphql-codegen-issue-template-fbe2g?fontsize=14&module=%2Fsrc%2Fpictures.generated.ts

1.7.1-alpha-3fad52f3.29 indeed fixes most of the un-imported types, but there are still issues when having fragments like:

fragment pictures on User {
  pictures(limit: 10) {
    nodes {
      ...picture
    }
  }
}

[dotansimha]

Yeah I missed fragments, my bad :) Also had a small issue with inner non-null types, fixed that as well.

Fixed in: https://github.com/dotansimha/graphql-code-generator/pull/2529

@rafeca can you please test it? 1.7.1-alpha-d5959bbc.33

[rafeca]

@rafeca can you please test it? 1.7.1-alpha-d5959bbc.33

This one works perfectly in our codebase! thanks a lot! 🤗

[rafeca]

@dotansimha are you planning to release a new version of graphql-code-generator with this fix any time soon? (not trying to put any pressure 😜, it's just for planning).

[dotansimha]

@rafeca I hope to release it today :)

[dotansimha]

Fixed in 1.8.0 🚀