TypeScript code generation and StructuredText value types

🆘 Support
1

Hey :wave:,
I was reading through the blog post How To Generate TypeScript Types From GraphQL and encountered the following problem when I have a query retrieving a Structured text field.

The “value” parameter has the type “unknown” in the generated type which causes an TypeScript error on the data prop when using the <StructuredText /> component:

Type ‘unknown’ is not assignable to type ‘Document | Node | StructuredText<Record, Record> | null | undefined’.ts(2322)

Here is my query:

query FrontPage($id: ItemId) {
  landingFrontPage(filter: { id: { eq: $id } }) {
    name
    structuredContent {
      value
    }
  }
}

Here the generated type:

export type FrontPageQuery = {
  __typename?: "Query"
  landingFrontPage?: {
    __typename?: "LandingFrontPageRecord"
    name: string
    structuredContent?: {
      __typename?: "LandingFrontPageModelStructuredContentField"
      value: unknown
    } | null
  } | null
}

In my codegen.yml I used the custom scalar types found here: Content Delivery API - Custom Scalar Types - DatoCMS Docs

Some observations

When I change the JsonField from JsonField: unkown to JsonField: "StructuredText<Record, Record>", in my codegen.yml, in the generated FrontPageQuery type the value will be of type value: StructuredText<Record, Record> which makes TypeScript happy again. Is this the right approach?

Best,
Martin

2

Hello @martin.palma and welcome to the community!

That is the right approach, but the codegen.yml should have generated as such automatically.
We’ll check this on our end to make sure it doesn’t happen again.

1 Like