Componente Zod Pull

Esta funcionalidad te permite obtener la descripción de tu esquema en forma de una descripción «Zod» con seguridad de tipos, que proporciona validación de esquemas prioritaria para TS e inferencia estática de tipos para tu esquema.

https://zod.dev

Para descargar nuestro esquema de Zod, vamos a cargar algunas dependencias y crear un script que use algunas utilidades de nuestro cms-renderer.

Comencemos con la estructura de nuestro proyecto

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // aquí es donde vive nuestro script

Ahora editaremos este archivo generated-schema.ts

generated-schema.ts theme={null}
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importando mi configuración

async function main() {
  const { cmsUrl, websiteId } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL no está definida. Configúrala en tu entorno o archivo .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID no está definido. Configúralo en tu entorno o archivo .env.'
    );
  }

  await saveZodSchemaCode(
    await fetchAllCustomSchemaFields(cmsConfig),
    './generated/cms-schemas.ts'
  );

  console.log('[generate-schemas] Listo.');
}

main().catch((err) => {
 console.error('[generate-schemas] Falló:', err);
  process.exit(1);
});

Tu CmsConfig debería verse así

theme={null}
export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

Dentro de nuestro package.json definimos cómo ejecutar el script y algunas dependencias

NOTA: Si no tienes un tsconfig, entonces puedes eliminar la bandera --tsconfig y su valor

package.json theme={null}
{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },

Ahora, después de ejecutar

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Listo.

Deberíamos obtener una salida similar y podremos ver un nuevo archivo en la estructura de nuestro proyecto

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // aquí es donde vive nuestro script
 generated/
   cms-schema.ts // esquema de Zod generado

Puedes inspeccionarlo por dentro y ver cómo luce tu esquema. Para actualizar este archivo tienes que ejecutar nuevamente el comando bun run generate-schemas, que puedes conectar a tu flujo de trabajo de dev o build.

Luego podemos importar estos objetos de Zod en nuestro archivo page.tsx de la siguiente manera

page.tsx theme={null}
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// llama a petFoodPostSchema.parse(obj) para un análisis de objetos con seguridad de tipos

Puedes actualizar tu esquema desde el panel de administración y volver a descargar el esquema actualizado para facilitar el desarrollo.