Graphql-code-generator: [TypeScript Compatibility] Fragments don't get a namespace generated

Created on 10 Apr 2019  路  18Comments  路  Source: dotansimha/graphql-code-generator

Using latest 1.0.8-alpha-57e0304d.7 I'm seeing differences with the way code for fragments is being generated:

Previously:

export namespace PushFields {
  export type Fragment = {
    __typename?: "Push";

    id?: Maybe<string>;

    timestamp?: Maybe<string>;

    branch?: Maybe<string>;

    before?: Maybe<Before>;

    after?: Maybe<After>;

    repo?: Maybe<Repo>;

    commits?: Maybe<(Maybe<Commits>)[]>;
  };

  export type Before = {
    __typename?: "Commit";

    sha?: Maybe<string>;

    message?: Maybe<string>;

    committer?: Maybe<Committer>;
  };

  export type Committer = {
    __typename?: "SCMId";

    login?: Maybe<string>;

    person?: Maybe<Person>;
  };

  export type Person = PersonFields.Fragment;

  export type After = {
    __typename?: "Commit";

    sha?: Maybe<string>;

    message?: Maybe<string>;

    committer?: Maybe<_Committer>;

    image?: Maybe<Image>;

    images?: Maybe<(Maybe<Images>)[]>;

    tags?: Maybe<(Maybe<Tags>)[]>;
  };

  export type _Committer = {
    __typename?: "SCMId";

    login?: Maybe<string>;

    person?: Maybe<_Person>;
  };

  export type _Person = PersonFields.Fragment;

  export type Image = {
    __typename?: "DockerImage";

    image?: Maybe<string>;

    imageName?: Maybe<string>;
  };

  export type Images = {
    __typename?: "DockerImage";

    image?: Maybe<string>;

    imageName?: Maybe<string>;
  };

  export type Tags = {
    __typename?: "Tag";

    name?: Maybe<string>;

    description?: Maybe<string>;

    timestamp?: Maybe<string>;

    release?: Maybe<Release>;
  };

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

    name?: Maybe<string>;

    timestamp?: Maybe<string>;
  };

  export type Repo = CoreRepoFieldsAndChannels.Fragment;

  export type Commits = {
    __typename?: "Commit";

    sha?: Maybe<string>;

    timestamp?: Maybe<string>;

    message?: Maybe<string>;

    author?: Maybe<Author>;
  };

  export type Author = {
    __typename?: "SCMId";

    _id?: Maybe<number>;

    login?: Maybe<string>;

    name?: Maybe<string>;
  };
}

With latest compatibility plugin we get:

export type PushFieldsFragment = { __typename?: "Push" } & Pick<
  Push,
  "id" | "timestamp" | "branch"
> & {
    before: Maybe<
      { __typename?: "Commit" } & Pick<Commit, "sha" | "message"> & {
          committer: Maybe<
            { __typename?: "SCMId" } & Pick<ScmId, "login"> & {
                person: Maybe<{ __typename?: "Person" } & PersonFieldsFragment>;
              }
          >;
        }
    >;
    after: Maybe<
      { __typename?: "Commit" } & Pick<Commit, "sha" | "message"> & {
          committer: Maybe<
            { __typename?: "SCMId" } & Pick<ScmId, "login"> & {
                person: Maybe<{ __typename?: "Person" } & PersonFieldsFragment>;
              }
          >;
          image: Maybe<
            { __typename?: "DockerImage" } & Pick<
              DockerImage,
              "image" | "imageName"
            >
          >;
          images: Maybe<
            Array<
              Maybe<
                { __typename?: "DockerImage" } & Pick<
                  DockerImage,
                  "image" | "imageName"
                >
              >
            >
          >;
          tags: Maybe<
            Array<
              Maybe<
                { __typename?: "Tag" } & Pick<
                  Tag,
                  "name" | "description" | "timestamp"
                > & {
                    release: Maybe<
                      { __typename?: "Release" } & Pick<
                        Release,
                        "name" | "timestamp"
                      >
                    >;
                  }
              >
            >
          >;
        }
    >;
    repo: Maybe<{ __typename?: "Repo" } & CoreRepoFieldsAndChannelsFragment>;
    commits: Maybe<
      Array<
        Maybe<
          { __typename?: "Commit" } & Pick<
            Commit,
            "sha" | "timestamp" | "message"
          > & {
              author: Maybe<
                { __typename?: "SCMId" } & Pick<ScmId, "_id" | "login" | "name">
              >;
            }
        >
      >
    >;
  };

and no further namespace. So this currently breaking backwards compatibility.

We have customer code that references PushFields with:

import {
    PushFields,
} from "../../typings/types";

export async function some(push: PushFields.Fragment): Promise<void> {}

Do you think there's something that can be done to solve this?

bug plugins waiting-for-release
Source
picture cdupuis

All 18 comments

Thank your for reporting in, @cdupuis. I think we missed the implementation of fragments in the compatibility plugin.

dotansimha picture dotansimha on 11 Apr 2019

@cdupuis WIP here: https://github.com/dotansimha/graphql-code-generator/pull/1697

dotansimha picture dotansimha on 11 Apr 2019

Fixed in 1.1.0 馃殌

dotansimha picture dotansimha on 17 Apr 2019

I am using this query:

query GetMachineActiveEvents($id: Int!) {
  machine(input: { id: $id }) {
    id
    unit {
      id
      events(active: true) {
        id
        type
        timeOn
        criticality
        description
        severity
        details {
          ... on CanErrorEvent {
            suspectParameterNumber
          }
          ... on DamageReportEvent {
            state
          }
          ... on PrecheckEvent {
            count
            failedCount
          }
          ... on ServiceKmEvent {
            serviceKm
            currentKm
          }
          ... on ServiceHourEvent {
            serviceRun
            currentRun
          }
          ... on ServiceCalendarEvent {
            date
          }
        }
      }
    }
  }
}

And I was able before 1.0.0 to do something like:

const details = event.details as GetMachineActiveEvents.ServiceKmEventInlineFragment;

However the generated types for GetMachineActiveEvents is:

export namespace GetMachineActiveEvents {
  export type Variables = GetMachineActiveEventsQueryVariables;
  export type Query = GetMachineActiveEventsQuery;
  export type Machine = GetMachineActiveEventsQuery["machine"];
  export type Unit = GetMachineActiveEventsQuery["machine"]["unit"];
  export type Events = GetMachineActiveEventsQuery["machine"]["unit"]["events"][0];
  export type Props = GetMachineActiveEventsProps;
  export const Document = GetMachineActiveEventsDocument;
  export const HOC = withGetMachineActiveEvents;
  export const Component = GetMachineActiveEventsComponent;
}

export type GetMachineActiveEventsQuery = { __typename?: "Query" } & {
  machine: Maybe<
    { __typename?: "Machine" } & Pick<Machine, "id"> & {
        unit: Maybe<
          { __typename?: "Unit" } & Pick<Unit, "id"> & {
              events: Maybe<
                Array<
                  { __typename?: "UnitEvent" } & Pick<
                    UnitEvent,
                    | "id"
                    | "type"
                    | "timeOn"
                    | "criticality"
                    | "description"
                    | "severity"
                  > & {
                      details: Maybe<

                          | ({ __typename?: "CanErrorEvent" } & Pick<
                              CanErrorEvent,
                              "suspectParameterNumber"
                            >)
                          | ({ __typename?: "DamageReportEvent" } & Pick<
                              DamageReportEvent,
                              "state"
                            >)
                          | ({ __typename?: "PrecheckEvent" } & Pick<
                              PrecheckEvent,
                              "count" | "failedCount"
                            >)
                          | ({ __typename?: "ServiceKmEvent" } & Pick<
                              ServiceKmEvent,
                              "serviceKm" | "currentKm"
                            >)
                          | ({ __typename?: "ServiceHourEvent" } & Pick<
                              ServiceHourEvent,
                              "serviceRun" | "currentRun"
                            >)
                          | ({ __typename?: "ServiceCalendarEvent" } & Pick<
                              ServiceCalendarEvent,
                              "date"
                            >)
                      >;
                    }
                >
              >;
            }
        >;
      }
  >;
};

Is there any way to reference the types fragments?

janhartmann picture janhartmann on 20 Apr 2019

@janhartmann are you using 1.1.0? Because I think I already fixed that.

dotansimha picture dotansimha on 21 Apr 2019

Yes, latest and greatest

janhartmann picture janhartmann on 21 Apr 2019
👍1

@janhartmann I still couldn't reproduce it with a unit test. Can you please provide the schema you are using? (or, another schema and query that reproduces it).
Thank you!

dotansimha picture dotansimha on 22 Apr 2019

Sure, here is a repo: https://github.com/janhartmann/graphql-code-generator-1686

janhartmann picture janhartmann on 22 Apr 2019
👍1

Thanks @janhartmann! It was really helpful!
I managed to reproduce it and fix it: https://github.com/dotansimha/graphql-code-generator/pull/1761
Can you please try the latest alpha? 1.1.1-alpha-036a07d3.22

dotansimha picture dotansimha on 23 Apr 2019

Awesome, yes - hold on, I am sitting on the code now, so let me try :-)

janhartmann picture janhartmann on 23 Apr 2019
👍1

Running with:

"@graphql-codegen/cli": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/fragment-matcher": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-compatibility": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-operations": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-react-apollo": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-resolvers": "^1.1.1-alpha-036a07d3.22",

I still do not get the types fragments generated. The types generated is still:

export namespace GetMachineActiveEvents {
  export type Variables = GetMachineActiveEventsQueryVariables;
  export type Query = GetMachineActiveEventsQuery;
  export type Machine = GetMachineActiveEventsQuery["machine"];
  export type Unit = GetMachineActiveEventsQuery["machine"]["unit"];
  export type Events = GetMachineActiveEventsQuery["machine"]["unit"]["events"][0];
  export type Props = GetMachineActiveEventsProps;
  export const Document = GetMachineActiveEventsDocument;
  export const HOC = withGetMachineActiveEvents;
  export const Component = GetMachineActiveEventsComponent;
}
janhartmann picture janhartmann on 23 Apr 2019

@janhartmann Are you sure? I tested it in your reproduction repo, and got this:

export namespace GetMachineActiveEvents {
  export type Variables = GetMachineActiveEventsQueryVariables;
  export type Query = GetMachineActiveEventsQuery;
  export type Machine = GetMachineActiveEventsQuery["machine"];
  export type Unit = GetMachineActiveEventsQuery["machine"]["unit"];
  export type Events = GetMachineActiveEventsQuery["machine"]["unit"]["events"][0];
  export type Details = GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"];
  export type CanErrorEventInlineFragment = {
    __typename: "CanErrorEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "suspectParameterNumber"
  >;
  export type DamageReportEventInlineFragment = {
    __typename: "DamageReportEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "state"
  >;
  export type PrecheckEventInlineFragment = {
    __typename: "PrecheckEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "count" | "failedCount"
  >;
  export type ServiceKmEventInlineFragment = {
    __typename: "ServiceKmEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "serviceKm" | "currentKm"
  >;
  export type ServiceHourEventInlineFragment = {
    __typename: "ServiceHourEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "serviceRun" | "currentRun"
  >;
  export type ServiceCalendarEventInlineFragment = {
    __typename: "ServiceCalendarEvent";
  } & Pick<
    GetMachineActiveEventsQuery["machine"]["unit"]["events"][0]["details"],
    "date"
  >;
  export type Props = GetMachineActiveEventsProps;
  export const Document = GetMachineActiveEventsDocument;
  export const HOC = withGetMachineActiveEvents;
  export const Component = GetMachineActiveEventsComponent;
}
dotansimha picture dotansimha on 23 Apr 2019

Weird, I am not seeing this I just triple checked my configuration, deleted node_modules and lock file. Installed and tried again, same issue.

I will test on my repo branch, I had a bit more advanced query that that one. Let me see if I can do it there.

janhartmann picture janhartmann on 23 Apr 2019

I can not see this either on my "bug branch", running with:

"@graphql-codegen/cli": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/fragment-matcher": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-compatibility": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-operations": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-react-apollo": "^1.1.1-alpha-036a07d3.22",
"@graphql-codegen/typescript-resolvers": "^1.1.1-alpha-036a07d3.22",
janhartmann picture janhartmann on 23 Apr 2019

@janhartmann Can you try to pin the dependency? just "1.1.1-alpha-036a07d3.22",

dotansimha picture dotansimha on 23 Apr 2019

That worked!

janhartmann picture janhartmann on 23 Apr 2019
🎉1

However, it complains about this

image

janhartmann picture janhartmann on 23 Apr 2019

@janhartmann Can you please open a new issue for it? I think it might not be related only to the inline fragments.

dotansimha picture dotansimha on 23 Apr 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

NickClark picture NickClark  路  3Comments
RIP21 picture RIP21  路  3Comments
edorivai picture edorivai  路  3Comments
mszczepanczyk picture mszczepanczyk  路  3Comments
dotansimha picture dotansimha  路  3Comments