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
}

score 2 · Accepted Answer · answered Nov 03 '19 at 19:55

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 03 '19 at 19:55

Titian Cernicova-Dragomir

230,986
31
415
357

Thank you! What do you mean by using an interface to "get a stronger name for the type"? – Stephen A. Lizcano Nov 03 '19 at 23:01
2

@StephenA.Lizcano type aliases get expanded in errors and tooltips, so you might see something like `Pick – Titian Cernicova-Dragomir Nov 04 '19 at 03:32

score 2 · Answer 2 · answered Jul 20 '21 at 14:19

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.

Appreciate your answer @dotan! Will definitely try asap and provide feedback, seems really usable for us. — Attila Csányi, Jul 20 '21 at 19:17

How to narrow Typescript Types autogenerated by graphQL codegen?

2 Answers2