Graphql-code-generator: Angular client mutation types not working

[steebchen]

Describe the bug
When using the apollo-angular client, types are not generated properly for mutations.

No .data found:

Meanwhile, it works perfectly with queries:

For mutations, I now have to manually set the type to get correct types:

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

type Mutation {
    register(input: RegisterInput!): RegisterPayload!
}

input RegisterInput {
    email: String!
    password: String!
}

interface AuthPayload {
    session: Session!
    user: User!
}

type RegisterPayload implements AuthPayload {
    session: Session!
    user: User!
}

1. My GraphQL operations:

mutation Register($input: RegisterInput!) {
    register(input: $input) {
        session {
            id
            token
        }

        user {
            ...UserAttributes
        }
    }
}

fragment UserAttributes on User {
    id
    createdAt
    firstName
    lastName
}

1. My codegen.yml config file:

schema:
  - ${API_ENDPOINT}
documents: src/**/*.graphql
overwrite: true
generates:
  src/app/graphql/graphql.generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-apollo-angular
    config:
      immutableTypes: true
      namingConvention:
        enumValues: change-case#upperCase
      scalars:
        Time: Date

Expected behavior
The res parameter in the first screenshot should have correct types.

Environment:

• OS: linux
• "@graphql-codegen/cli": "^1.0.0",
• "@graphql-codegen/typescript": "^1.0.0",
• "@graphql-codegen/typescript-apollo-angular": "^1.1.3",
• "@graphql-codegen/typescript-operations": "^1.0.0",
• NodeJS: v10.15.0

[dotansimha]

Hi @steebchen !

Can you please create a small reproduction for this issue in a repo? (also, btw, it's recommended to use the same version for all @graphql-codegen/... libraries).

@kamilkisiela can you please take a look?

[steebchen]

The versions are actually all pinned to 1.1.3 in the lockfile, should have written those down instead. Also, I just realized this is also not an issue of this repo, sorry about that. For the query, the signature is:

export declare class Query<T = {}, V = R> {
  // ...
  fetch(variables?: V, options?: QueryOptions<V>): Observable<ApolloQueryResult<T>>;
}

in apollo-angular/Query.d.ts. ApolloQueryResult has data, errors, etc:

export declare type ApolloQueryResult<T> = {
    data: T;
    errors?: ReadonlyArray<GraphQLError>;
    loading: boolean;
    networkStatus: NetworkStatus;
    stale: boolean;
};

However, the mutation returns a FetchResult<T> instead of ApolloQueryResult and somehow this type returns only context & extensions from apollo-link/lib/types.d.ts:

export declare type FetchResult<TData = {
    [key: string]: any;
}, C = Record<string, any>, E = Record<string, any>> = ExecutionResult<TData> & {
    extensions?: E;
    context?: C;
};

I think the error could come from ExecutionResult, because it seems it is any because it is imported like import { ExecutionResult } from 'graphql/execution/execute'; but ther eis no ExecutionResult in graphql/execution/execute.js and the error is caught nowhere because it's plain JS (argh).

Did I get something wrong or does the issue come from apollo-link or maybe graphql?

[steebchen]

I think it's because the graphql module does not include .d.ts files, but .js.flow types.. x)

[dotansimha]

Hmm @steebchen , I'm not sure because I think ExecutionResult comes from the graphql engine, and shouldn't been used there. (not again, not sure).

Anyway, I recommend to use pinned dependencies and the latest, maybe you have an older version of one of the deps that causing it? it might effect as well.
Try to check it with yarn why (for graphql, apollo-link, apollo-client and apollo-angular) - there should be only one of each one.

[steebchen]

As I said in comment https://github.com/dotansimha/graphql-code-generator/issues/1837#issuecomment-491590599, I have the latest version of all modules and I even tried upgrading everything but it didn't help.
I am pretty sure that the bug comes from importing ExecutionResult in apollo-engine but all graphql files don't have .d.ts files and only .js.flow. I will report an issue in https://github.com/graphql/graphql-js.

[dotansimha]

@steebchen Ohh I see, that's because graphql does not have a built-in TypeScript declaration. You need to install @types/graphql.

[steebchen]

Ah well, that was a simple fix... Thanks so much! I was programming so much Go lately that I almost forgot you can fix dumb Javascript modules by adding @types/* to your project..

[dotansimha]

Great!
And yeah, it's mostly because not all JavaScript packages support or adopted TypeScript, so the @types/... are here to fix that.

[steebchen]

Yeah I know, I was using JS a lot until the end of 2018, but I regret it.. not having types in a language creates only more problems than it solves..