Structured Text with Typescript

Hello everyone! Completely new to DatoCMS after working with Strapi for a while, and I’m having major issues getting the typescript codegen things to work.

I’ve followed this guide but I’m not having any success.

For one, the graphql.config.yml file has a spelling error in the custom scalars:
“JsonField: unkown” should be unknown, right?

But when I fix that I get a type error on the StructuredText component:

"Type '{ __typename?: "StartpageModelContentField" | undefined; value: unknown; } | null | undefined' is not assignable to type 'Document | Node | StructuredText<Record, Record> | null | undefined'."
... 
"Type 'unknown' is not assignable to type 'Document'"

In other similar issues on here, a suggested solution is to make the JsonField scalar have the type " StructuredText<Record, Record>", but StructuredText doesn’t get imported in to the generated.ts file, and if I import it manually I’m getting the error “Generic type ‘Record’ requires 2 type argument(s).ts(2314)”

Any help would be much appreciated, it’s definitely possible I’m doing something else completely wrong.

Hello @koskarbengtsson and welcome to the community!

Can you attempt to change it to

JsonField: "StructuredText<Record, Record>

In your graphql.config.yml and let me know if it works after re-generating?

Thank you for the swift response! I get errors in the generated.ts file itself now, but it did fix the error in the components. What I also had to do was restructure the .yml file to this:

...

plugins:
      - typescript
      - typescript-operations
      - typed-document-node
    config:
      strictScalars: true
      scalars:
        BooleanType: boolean
        CustomData: Record<string, string>
        Date: string
        DateTime: string
        FloatType: number
        IntType: number
        ItemId: string
        JsonField: "StructuredText<Record, Record>"
        MetaTagAttributes: Record<string, string>
        UploadId: string
      namingConvention:
        enumValues: "./src/lib/pascalCaseWithUnderscores.js"

Putting the custom scalars indented inside the typescript-operations plugin made all the scalars in the generated file “any” for some reason.

Any ideas on how to fix the type errors in generated.ts? It won’t compile and can’t be excluded in my tsconfig.

I’ve sort of kinda made it work by changing my .yml file to this:

generates:
  src/graphql/generated.ts:
    plugins:
      - typescript
      - add:
          content: "import { type Record as StructuredTextGraphQlResponseRecord, type StructuredText as StructuredTextGraphQlResponse } from 'datocms-structured-text-utils';"
      - typescript-operations
      - typed-document-node
    config:
      strictScalars: true
      scalars:
        BooleanType: boolean
        CustomData: Record<string, string>
        Date: string
        DateTime: string
        FloatType: number
        IntType: number
        ItemId: string
        JsonField: "StructuredTextGraphQlResponse<StructuredTextGraphQlResponseRecord,StructuredTextGraphQlResponseRecord>"
        MetaTagAttributes: Record<string, string>
        UploadId: string
      namingConvention:
        enumValues: "./src/lib/pascalCaseWithUnderscores.js"

and then adding the full “page.content.value” prop to the StructuredText data field.
But I imagine that would break cases where you need to use blocks or links instead of the value.