Define a single schema with end-to-end Type safety

[airtonix]

Currently in a NetlifyCMS project, I'm defining the CMS UI via typescript and then making the content available as imports via contentlayer, which generates types for all my generated content.

Problem with this approach is that I end up defining the schema twice:

• one for the UI
• one for the generated data and how I use it in the api endpoints and things like getStaticPaths , getStaticProps and getServerSideProps.

Will KeyStatic do this for me?

edit: to clarify

Here's a basic level example https://github.com/officialrajdeepsingh/contentLayerNetlifycms/blob/main/contentlayer.config.ts

• This is the content layer Post schema: https://github.com/officialrajdeepsingh/contentLayerNetlifycms/blob/main/contentlayer.config.ts#L4-L57, it ends up generating :

  • types
  • importable content

• This would be the related (but functionally separate) UI schema for the cms: https://github.com/officialrajdeepsingh/contentLayerNetlifycms/blob/main/public/admin/config.yml#L7-L21

  • this chap has done what most others mention in their tutorials: define it in yaml in the public folder
  • but you can define it via typescript.
  • if you want to use custom cms widgets, then instantiation via the js/ts api is required. although you can probably still import the yaml instead of defining all that in ts. Obviously as your cms use case scales you'd want to move to typescript.

I'm hoping that I wont need to :

• use content-layer
• define two different schemas

And I hope that I will

• have programmatic access to my content (along with generated types)

[simonswiss]

Hey!

Sorry about the delay in this answer.

Update: I got excited with this, and created a demo repo where I re-create a content structure mirroring what you've got in your links, to give you an idea of how everything works.

The TL;DR of how you can pull schema-defined types in the frontend is here: https://github.com/simonswiss/keystatic-typesafety-demo/blob/main/src/app/(app)/page.tsx#L9-L15

---

I feel like Keystatic's Reader API does all you want, and means you don't need to define your schema/types in two different places.

The schema you define in your config file will generate Types you can bring in your frontend templates.

The Reader API gives you a mechanism to read data from your file system, and also import the Types generated from the schema definition.

Check out this Entry type here:

keystatic/packages/keystatic/src/reader/index.ts

Line 45 in ecd5eda

export type Entry<

With it, you can get the type for a collection entry like so:

Entry<typeof myConfig['collections']['myCollection']>

Hope this helps!

[airtonix]

actually i don't think this solves the problem.

i only get types that makes sense in the context of the admin ui, not the resolved content.

[airtonix]

related:

1. the computed types from a fields.Select should result in a union type composed of the option values. #855 (comment)
2. Provide technical documentation as docblock comments on types #854

[airtonix]

@simonswiss sorry the reader doesn't give me what i need.

[airtonix]

So i started picking apart the types behind the read api and it looks like we need this type exposed:

type ValueForReadingWithMode<
    Schema extends ComponentSchema,
    ResolveLinkedFiles extends boolean | undefined
> = ResolveLinkedFiles extends true
    ? ValueForReadingDeep<Schema>
    : ValueForReading<Schema>;

type ResolvedSchema<Schema extends Record<string, ComponentSchema>, SlugField = void> = {
    [Key in keyof Schema]: SlugField extends Key
        ? Schema[Key] extends SlugFormField<any, any, any, infer SlugSerializedValue>
            ? SlugSerializedValue
            : ValueForReadingWithMode<Schema[Key], true>
        : ValueForReadingWithMode<Schema[Key], true>;
}

Screencast.from.2024-01-12.17-26-23.webm

// keystatic.config.ts
import { config, fields, collection } from '@keystatic/core';
import type { Singleton, ComponentSchema, ValueForReadingDeep, ValueForReading, SlugFormField } from '@keystatic/core';
import type { Entry } from '@keystatic/core/reader';


type ValueForReadingWithMode<
    Schema extends ComponentSchema,
    ResolveLinkedFiles extends boolean | undefined
> = ResolveLinkedFiles extends true
    ? ValueForReadingDeep<Schema>
    : ValueForReading<Schema>;

type ResolvedSchema<Schema extends Record<string, ComponentSchema>, SlugField = void> = {
    [Key in keyof Schema]: SlugField extends Key
        ? Schema[Key] extends SlugFormField<any, any, any, infer SlugSerializedValue>
            ? SlugSerializedValue
            : ValueForReadingWithMode<Schema[Key], true>
        : ValueForReadingWithMode<Schema[Key], true>;
}

const PublishablePageSchema = {
    title: fields.slug({ name: { label: 'Title' }}),
    date: fields.date({ label: 'date' }),
    stage: fields.text({ label: 'Status' }),
}

type Foo = Entry<Singleton<typeof PublishablePageSchema>>
export type PublishablePage = ResolvedSchema<
    typeof PublishablePageSchema, 'title'
>

const IconifyingPageSchema = {
    icon: fields.text({ label: 'Icon' }),
}

type Bar = Entry<Singleton<typeof IconifyingPageSchema>>
export type IconifyingPage = ResolvedSchema<
    typeof IconifyingPageSchema
>