How to narrow Typescript Types autogenerated by graphQL codegen?

Question

I get a TypeScript type autogenerated from AWS-Amplify GraphQL (which uses apollo-codegen I believe) like such:

export type GetNoteQuery = {
  getNote:  {
    __typename: "Note",
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null,
  } | null,

I want to generate a base type of "Note" to use as "base" type to use in my code when using the returned data. I.e. mapping notes onto a React component, etc.

Is there a way to narrow this type that is auto generated, or to extend it in some way, to have it look like:

type Note = {
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null
}

Titian Cernicova-Dragomir · Accepted Answer · 2019-11-03 19:55:50Z

2

You can use an index query to get the type of getNote coupled with Exclude to get rid of the the null from the property type. You then can use Omit to get rid of the extra property.

export type GetNoteQuery = {
  getNote: {
    __typename: "Note",
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null,
  } | null
}

type Note = Omit<Exclude<GetNoteQuery['getNote'], null>, '__typename'>

You can also use an interface to get a stronger name for the type:


interface Note extends Omit<Exclude<GetNoteQuery['getNote'], null>, '__typename'> { }

answered Nov 3, 2019 at 19:55

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephen A. Lizcano Over a year ago

Thank you! What do you mean by using an interface to "get a stronger name for the type"?

Titian Cernicova-Dragomir Over a year ago

@StephenA.Lizcano type aliases get expanded in errors and tooltips, so you might see something like Pick<Exclude<.... instead of Note. Interface names are always preserved.

Dotan Simha · Accepted Answer · 2021-07-20 14:19:33Z

2

GraphQL-Codegen creator here.

Just some background on the decision to generate this kind of TS code: We started typescript as a plugin for creating an exact representation of the GraphQL schema. Then, typescript-operations take operations and fragments (that picks specific fields and data from the schema) and generates code that takes the same fields and data fields from the generated types by typescript plugin.

We saw some developers prefer cleaner code, so you can use preResolveTypes: true to avoid using Pick and just use the primitive type in-place. You can also use onlyOperationTypes: true in order to tell the codegen to avoid generating types that are not needed.

answered Jul 20, 2021 at 14:19

Dotan Simha

7721 gold badge5 silver badges13 bronze badges

1 Comment

Attila Over a year ago

Appreciate your answer @dotan! Will definitely try asap and provide feedback, seems really usable for us.

Collectives™ on Stack Overflow

How to narrow Typescript Types autogenerated by graphQL codegen?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related