Komponent Zod Pobieranie

Ta funkcja pozwala uzyskać opis schematu w postaci bezpiecznego typowo opisu „Zod”, który zapewnia walidację schematu w duchu TS-first oraz statyczne wnioskowanie typów dla Twojego schematu.

https://zod.dev

Aby pobrać nasz schemat Zod, załadujemy kilka zależności i utworzymy skrypt, który korzysta z kilku narzędzi z naszego cms-renderer

Zacznijmy od struktury naszego projektu

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // tutaj znajduje się nasz skrypt

Teraz edytujemy plik generated-schema.ts

generated-schema.ts theme={null}
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importuję swoją konfigurację

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

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL nie została ustawiona. Ustaw ją w swoim środowisku lub pliku .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID nie został ustawiony. Ustaw go w swoim środowisku lub pliku .env.'
    );
  }

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

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

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

Twój CmsConfig powinien wyglądać tak

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

W pliku package.json definiujemy sposób uruchomienia skryptu oraz niektóre zależności

UWAGA: Jeśli nie masz pliku tsconfig, możesz usunąć flagę --tsconfig oraz jej wartość

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

Teraz, po uruchomieniu

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

Powinniśmy otrzymać podobny wynik i zobaczyć nowy plik w strukturze projektu

theme={null}
apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // tutaj znajduje się nasz skrypt
 generated/
   cms-schema.ts // wygenerowany schemat Zod

Możesz zajrzeć do środka i zobaczyć, jak wygląda Twój schemat. Aby zaktualizować ten plik, musisz ponownie uruchomić polecenie bun run generate-schemas, które możesz powiązać ze swoim przepływem pracy dev lub build.

Następnie możemy pobrać te obiekty Zod w naszym pliku page.tsx w następujący sposób

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

// wywołaj petFoodPostSchema.parse(obj), aby bezpiecznie typować podczas parsowania obiektów

Możesz zaktualizować swój schemat z poziomu panelu administracyjnego i ponownie pobrać zaktualizowany schemat, aby ułatwić sobie rozwój.