Récupération du schéma Zod du composant

Cette fonctionnalité vous permet d'obtenir la description de votre schéma sous la forme d'une description « Zod » sûre au niveau du typage, qui fournit une validation de schéma pensée d'abord pour TS et une inférence statique des types pour votre schéma.

https://zod.dev

Pour récupérer notre schéma Zod, nous allons charger quelques dépendances et créer un script qui utilise quelques utilitaires de notre cms-renderer.

Commençons par la structure de notre projet

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // c'est ici que se trouve notre script

Nous allons maintenant modifier ce fichier generated-schema.ts

generated-schema.ts theme={null}
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importation de ma configuration

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL n'est pas défini. Définissez-le dans votre environnement ou dans le fichier .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID n'est pas défini. Définissez-le dans votre environnement ou dans le fichier .env.'
    );
  }

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

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

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

Votre CmsConfig devrait ressembler à

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

Dans notre package.json, nous définissons comment exécuter le script ainsi que quelques dépendances

REMARQUE : Si vous n'avez pas de tsconfig, vous pouvez supprimer l'indicateur --tsconfig et sa valeur

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",
    "...": "..."
  },

À présent, après avoir exécuté

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

Nous devrions obtenir une sortie similaire et voir un nouveau fichier dans notre structure de projet

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // c'est ici que se trouve notre script
 generated/
   cms-schema.ts // schéma Zod généré

Vous pouvez l'inspecter pour voir à quoi ressemble votre schéma. Pour mettre à jour ce fichier, vous devez exécuter de nouveau la commande bun run generate-schemas, que vous pouvez connecter à votre flux de travail dev ou build.

Nous pouvons ensuite récupérer ces objets Zod dans notre fichier page.tsx comme ceci

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

// appelez petFoodPostSchema.parse(obj) pour une analyse d'objets avec sécurité de type

Vous pouvez mettre à jour votre schéma depuis le panneau d'administration et récupérer à nouveau le schéma mis à jour pour faciliter le développement