Skip to content

relay-compiler generates invalid Typescript for @raw_response_type + combination of conditional and non-conditional fragments #4914

Open
@vhfmag

Description

@vhfmag

Given the code below:

export const query = graphql`
    query AppQuery($showEmail: Boolean!) @raw_response_type {
        ...AppFragment
        ...AppConditionalFragment
    }
`;

export const fragment = graphql`
    fragment AppFragment on Query {
        account {
            name
        }
    }
`;

export const conditionalFragment = graphql`
    fragment AppConditionalFragment on Query {
        account @include(if: $showEmail) {
            email
        }
    }
`;

Relay compiler generates the following types (notice the account field is listed twice):

export type AppQuery$rawResponse = {
  readonly account: {
    readonly id: string;
    readonly name: string;
  } | null | undefined;
  readonly account: {
    readonly email: string;
  } | null | undefined;
};

Which typescript interprets by using the first declaration of a given field and ignoring all others, leading to errors like:

Image

This very reproduction can be found at https://github.com/vhfmag/relay-ts-typegen-issue-repro

Instead, relay compiler should generate something like:

export type AppQuery$rawResponse = {
  readonly account: {
    readonly id: string;
    readonly name: string;
    readonly email?: string | null | undefined;
  } | null | undefined;
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions