Generate Zod Schemas from Sanity Schemas
npm install sanity zod @sanity-typed/zod
product.ts
:
// import { defineArrayMember, defineField, defineType } from "sanity";
import {
defineArrayMember,
defineField,
defineType,
} from "@sanity-typed/types";
/** No changes using defineType, defineField, and defineArrayMember */
export const product = defineType({
name: "product",
type: "document",
title: "Product",
fields: [
defineField({
name: "productName",
type: "string",
title: "Product name",
validation: (Rule) => Rule.required(),
}),
defineField({
name: "tags",
type: "array",
title: "Tags for item",
of: [
defineArrayMember({
type: "object",
name: "tag",
fields: [
defineField({ type: "string", name: "label" }),
defineField({ type: "string", name: "value" }),
],
}),
],
}),
],
});
sanity.config.ts
:
import { deskTool } from "sanity/desk";
// import { defineConfig } from "sanity";
import { defineConfig } from "@sanity-typed/types";
import type { InferSchemaValues } from "@sanity-typed/types";
import { post } from "./schemas/post";
import { product } from "./schemas/product";
/** No changes using defineConfig */
const config = defineConfig({
projectId: "59t1ed5o",
dataset: "production",
plugins: [deskTool()],
schema: {
types: [
product,
// ...
post,
],
},
});
export default config;
/** Typescript type of all types! */
export type SanityValues = InferSchemaValues<typeof config>;
/**
* SanityValues === {
* product: {
* _createdAt: string;
* _id: string;
* _rev: string;
* _type: "product";
* _updatedAt: string;
* productName: string;
* tags?: {
* _key: string;
* _type: "tag";
* label?: string;
* value?: string;
* }[];
* };
* // ... all your types!
* }
*/
client-with-zod.ts
:
import config from "sanity.config";
import type { SanityValues } from "sanity.config";
import { createClient } from "@sanity-typed/client";
import { sanityConfigToZods } from "@sanity-typed/zod";
export const client = createClient<SanityValues>({
projectId: "59t1ed5o",
dataset: "production",
useCdn: true,
apiVersion: "2023-05-23",
});
/** Zod Parsers for all your types! */
const sanityZods = sanityConfigToZods(config);
/**
* typeof sanityZods === {
* [type in keyof SanityValues]: ZodType<SanityValues[type]>;
* }
*/
export const makeTypedQuery = async () => {
const results = await client.fetch('*[_type=="product"]');
return results.map((result) => sanityZods.product.parse(result));
};
/**
* typeof makeTypedQuery === () => Promise<{
* _createdAt: string;
* _id: string;
* _rev: string;
* _type: "product";
* _updatedAt: string;
* productName?: string;
* tags?: {
* _key: string;
* label?: string;
* value?: string;
* }[];
* }[]>
*/
While sanityConfigToZods
gives you all the types for a given config keyed by type, sometimes you just want a zod union of all the SanityDocument
s. Drop it into sanityDocumentsZod
:
import type { sanityConfigToZods, sanityDocumentsZod } from "@sanity-typed/zod";
const config = defineConfig({
/* ... */
});
const zods = sanityConfigToZods(config);
/**
* zods === { [type: string]: typeZodParserButSomeTypesArentDocuments }
*/
const documentsZod = sanityDocumentsZod(config, zods);
/**
* documentsZod === z.union([Each, Document, In, A, Union])
*/
All validations except for custom
are included in the zod parsers. However, if there are custom validators you want to include, using enableZod
on the validations includes it:
import { defineConfig, defineField, defineType } from "@sanity-typed/types";
import { enableZod, sanityConfigToZods } from "@sanity-typed/zod";
export const product = defineType({
name: "product",
type: "document",
title: "Product",
fields: [
defineField({
name: "productName",
type: "string",
title: "Product name",
validation: (Rule) =>
Rule.custom(
() => "fail for no reason, but only in sanity studio"
).custom(
enableZod((value) => "fail for no reason, but also in zod parser")
),
}),
// ...
],
});
// Everything else the same as before...
const config = defineConfig({
projectId: "your-project-id",
dataset: "your-dataset-name",
schema: {
types: [
product,
// ...
],
},
});
const zods = sanityConfigToZods(config);
expect(() =>
zods.product.parse({
productName: "foo",
/* ... */
})
).toThrow("fail for no reason, but also in zod parser");
@sanity-typed/*
generally has the goal of only having effect to types and no runtime effects. This package is an exception. This means that you will have to import your sanity config to use this. While sanity v3 is better than v2 at having a standard build environment, you will have to handle any nuances, including having a much larger build.
As your sanity driven application grows over time, your config is likely to change. Keep in mind that you can only derive types of your current config, while documents in your Sanity Content Lake will have shapes from older configs. This can be a problem when adding new fields or changing the type of old fields, as the types won't can clash with the old documents.
Ultimately, there's nothing that can automatically solve this; we can't derive types from a no longer existing config. This is a consideration with or without types: your application needs to handle all existing documents. Be sure to make changes in a backwards compatible manner (ie, make new fields optional, don't change the type of old fields, etc).
Another solution would be to keep old configs around, just to derive their types:
const config = defineConfig({
schema: {
types: [foo],
},
plugins: [myPlugin()],
});
const oldConfig = defineConfig({
schema: {
types: [oldFoo],
},
plugins: [myPlugin()],
});
type SanityValues =
| InferSchemaValues<typeof config>
| InferSchemaValues<typeof oldConfig>;
This can get unwieldy although, if you're diligent about data migrations of your old documents to your new types, you may be able to deprecate old configs and remove them from your codebase.
Often you'll run into an issue where you get typescript errors in your IDE but, when building workspace (either you studio or app using types), there are no errors. This only occurs because your IDE is using a different version of typescript than the one in your workspace. A few debugging steps:
- The
JavaScript and TypeScript Nightly
extension (identifierms-vscode.vscode-typescript-next
) creates issues here by design. It will always attempt to use the newest version of typescript instead of your workspace's version. I ended up uninstalling it. -
Check that VSCode is actually using your workspace's version even if you've defined the workspace version in
.vscode/settings.json
. UseTypeScript: Select TypeScript Version
to explictly pick the workspace version. - Open any typescript file and you can see which version is being used in the status bar. Please check this (and provide a screenshot confirming this) before creating an issue. Spending hours debugging your issue ony to find that you're not using your workspace's version is very frustrating.