setting up modules with sanity

Connect your schema files to the CMS:

Add your newly created schema files to the schemaTypes definition within the CMS: src/lib/cms/schemas/index.tsx

//
// Mint Module Objects
import { mintModuleSuperhero } from "~lib/cms/schemas/objects/mint/modules/superhero";
import { mintModuleSuperheroContent } from "./objects/mint/modules/superhero/content";
import { mintModuleSuperheroDesign } from "./objects/mint/modules/superhero/design";

// ...

export const schemaTypes = [
	// 
	// Mint Module Object
	mintModuleSuperhero,
	mintModuleSuperheroContent,
	mintModuleSuperheroDesign,
];

Make module available to the CMS page builder by adding the type to the page-sections type: src/lib/cms/schemas/objects/common/page-modules.tsx

import { defineType } from "sanity";

export const pageModules = defineType({
	name: "page-sections",
	type: "array",
	title: "Page Modules",
	description: "Page modules are stackable content blocks for building the webpage",
	of: [
		// ...
		{ type: "mint-module-superhero" },
	],
})

Build the module’s react component

Create the front end React component: mint/modules/ModuleName.tsx

interface MintModuleProps {
	/** Description of prop **/
	prop?: string;
}

function MintModule(props: ReactPropsWithChildren<MintModuleProps>) {
	return <div className="">Mint Module</div>;
}

Incorporating checks in development is crucial because TypeScript checks happen during compile-time, leaving room for unanticipated data to pass through the system at runtime. While we aim to address this in future updates, for now we avoid issues by ensuring that nearly every aspect of a React component is optional.

Create a page where you can see your module

Go to http://localhost:3001/cms/production/desk > Pages > Module Directory > Create New

Give Internal Title and Page Title the name of your module, e.g., Mint Module Superhero.

Add different configurations of the module (”Stories”) with Add Item > Mint Module: Module-Name:

Open up and see your component with Open preview:

Debugging undelivered data to the frontend

Field design names are pre-done. See conventions here: base.ts

export const GROQ_MINT_MODULE_ARTICLE_HEADER_QUERY = /* groq */ `
_type = "mint-module-article-header" => {
content{
defined(anchorId) => {anchorId},
defined)}}

If you write a new query and it is being overwritten by something in base.ts, try restarting your server