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
}

Answer 1

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'> { }