Question about accessing property of generated union type

[acjo85]

Hi,
We have been using codegen version ^1.0.6 for a while and are trying to bump it to the latest version (5.0.0).

With the update the structure of the generated code has changed and we ran in to the following issue when running our code:

type A = {
    episode: String
    id: number
}

type B = {
  id: number
}

//  Structure of Foo with the current generated code v 5.0.0
export type Foo = A | B

//  Structure of Foo with the previous generated code v ^1.0.6
export type Foo = { episode: string | undefined, id number }


function test(value: Foo | undefined) {
    let episode = value?.episode  // <---- Build error since episodes might not be accessible
    console.log(episode)
}

test(undefined)

we get this error:

Property 'episode' does not exist on type 'foo'.
  Property 'episode' does not exist on type 'b'.

How would we safely access episode with the current generated code of Foo?

Our generated code is much more complex but this is a simplified version that highlights the issue.

Versions we used before:
    "@graphql-codegen/cli": "^1.0.6",
    "@graphql-codegen/fragment-matcher": "^1.0.6",
    "@graphql-codegen/typescript": "1.0.6",
    "@graphql-codegen/typescript-operations": "1.0.6",

Versions we're trying to use now:
    "@graphql-codegen/cli": "5.0.0",
    "@graphql-codegen/fragment-matcher": "5.0.0",
    "@graphql-codegen/typescript": "4.0.1",
    "@graphql-codegen/typescript-operations": "4.0.1",

[charpeni]

You'll need to narrow down the type of Foo | undefined which is ultimately A | B | undefined.

To achieve this, you can use the in operator to narrow down the type.

type A = {
    episode: string;
    id: number;
}

type B = {
  id: number;
}

type Foo = A | B;

function test(value: Foo | undefined) {
  if (!value) {
    return value;
    //     ^? (parameter) value: undefined
  }

  if ('episode' in value) {
    return value;
    //     ^? (parameter) value: A
  }

  return value;
  //     ^? (parameter) value: B
}

🔗 TypeScript Playground.

[acjo85]

Thanks @charpeni!

We will go with this approach :)

Do you know if there is some way to configure codegen to not make this kind of unions and instead get the previous structure of Foo?

[charpeni]

I do not know, but I wouldn't recommend it.

If you would like to pursue it, maybe try flattenGeneratedTypes, but I'm not sure if it's even related:

graphql-code-generator/packages/plugins/typescript/operations/src/config.ts

Lines 111 to 133 in 077f7bf

	/**
	* @description Flatten fragment spread and inline fragments into a simple selection set before generating.
	* @default false
	*
	* @exampleMarkdown
	* ```ts filename="codegen.ts"
	* import type { CodegenConfig } from '@graphql-codegen/cli';
	*
	* const config: CodegenConfig = {
	* // ...
	* generates: {
	* 'path/to/file.ts': {
	* plugins: ['typescript', 'typescript-operations'],
	* config: {
	* flattenGeneratedTypes: true
	* },
	* },
	* },
	* };
	* export default config;
	* ```
	*/
	flattenGeneratedTypes?: boolean;

The advantage of using a discriminated union here is that it could either be A or B (a little note here that TypeScript doesn't use exact type, so you can technically have a hybrid of A & B as a valid type) versus a flat object containing all possibilities. Still, the discriminated union will make distinguishing the types contained in the union easier. It's a little bit more nuanced than that because the current union doesn't have a discriminant outside of episode only being available on type A but you could probably leverage __typename as a discriminant.

If you want the previous structure because it was easier to read and know what kind of properties are expected, you could leverage a Prettify/Simplify utility type:

import type { Simplify } from 'type-fest';

type A = {
  id: number;
  episode: string;
}

type B = {
  id: number;
}

type Foo = Simplify<A | B>;
//   ^? type Foo = { id: number; episode: string; } | { id: number; }

🔗 TypeScript Playground.

Alternatively, maybe the previous behavior could be achieved with a utility type like MergeExclusive, still using a union, but properties will be there as undefined:

import type { Simplify, MergeExclusive } from 'type-fest';

type A = {
    episode: string;
    id: number;
}

type B = {
  id: number;
}

type Foo = Simplify<MergeExclusive<A, B>>;
//   ^? type Foo = { episode?: undefined; id: number; } | { episode: string; id: number; }

🔗 TypeScript Playground.