({
resolver: zodResolver(articleCreateSchema),
});
const onSubmit = async (data: ArticleCreateInput) => {
const article = await articleService.create(data);
console.log('Created:', article);
};
return (
);
}
```
### Astro Actions Example
```typescript actions/article.ts theme={null}
import { defineAction } from 'astro:actions';
import { articleCreateSchema } from '@/strapi/collections/article/schemas';
import { articleService } from '@/strapi/collections/article/service';
export const createArticle = defineAction({
accept: 'form',
input: articleCreateSchema,
handler: async (input) => {
const article = await articleService.create(input);
return { success: true, article };
},
});
```
### Manual Validation
```typescript theme={null}
import { articleCreateSchema } from '@/strapi/collections/article/schemas';
const formData = {
title: 'My Article',
slug: 'my-article',
status: 'draft',
// ...
};
// Use safeParse for error handling
const result = articleCreateSchema.safeParse(formData);
if (result.success) {
// Data is valid and typed
const validData = result.data;
await articleService.create(validData);
} else {
// Validation failed
console.error(result.error.errors);
// [
// { path: ['title'], message: 'String must contain at least 1 character(s)' },
// { path: ['views'], message: 'Required' }
// ]
}
// Use parse to throw on error
try {
const validData = articleCreateSchema.parse(formData);
await articleService.create(validData);
} catch (error) {
if (error instanceof z.ZodError) {
console.error(error.errors);
}
}
```
## Custom Validation
Extend generated schemas with custom validation:
```typescript theme={null}
import { articleCreateSchema } from '@/strapi/collections/article/schemas';
// Add custom validation rules
const customArticleSchema = articleCreateSchema.extend({
title: z.string()
.min(1, 'Title is required')
.max(255, 'Title too long')
.refine(
(title) => !title.toLowerCase().includes('spam'),
'Title contains forbidden words'
),
slug: z.string().regex(
/^[a-z0-9-]+$/,
'Slug must contain only lowercase letters, numbers, and hyphens'
),
}).refine(
(data) => data.excerpt || data.content.length > 0,
'Either excerpt or content must be provided'
);
// Use the custom schema
const result = customArticleSchema.safeParse(formData);
```
## Advanced Relation Schemas (v5)
For Strapi v5, schemas support advanced relation operations:
```typescript theme={null}
// Simple format (array of documentIds)
z.array(z.string())
// Advanced format with connect/disconnect/set
z.union([
// Shorthand: array of documentIds
z.array(z.string()),
// Longhand: object with operations
z.object({
/** Add relations while preserving existing ones */
connect: z.array(
z.union([
z.string(), // Just documentId
z.object({
documentId: z.string(),
locale: z.string().optional(),
status: z.enum(['draft', 'published']).optional(),
position: z.object({
before: z.string().optional(),
after: z.string().optional(),
start: z.boolean().optional(),
end: z.boolean().optional(),
}).optional(),
}),
])
).optional(),
/** Remove specific relations */
disconnect: z.array(
z.union([
z.string(),
z.object({
documentId: z.string(),
locale: z.string().optional(),
status: z.enum(['draft', 'published']).optional(),
}),
])
).optional(),
/** Replace ALL relations */
set: z.array(z.string()).optional(),
}),
])
```
Usage example:
```typescript theme={null}
// Simple: just set the relations
const simpleData = {
categories: ['cat-1', 'cat-2'],
};
// Advanced: add and remove specific items
const advancedData = {
categories: {
connect: [{ documentId: 'new-cat', position: { start: true } }],
disconnect: [{ documentId: 'old-cat' }],
},
};
// Both validate successfully
articleUpdateSchema.parse(simpleData);
articleUpdateSchema.parse(advancedData);
```
## Error Handling
### Display Validation Errors
```typescript theme={null}
import { z } from 'zod';
import { articleCreateSchema } from '@/strapi/collections/article/schemas';
function displayErrors(error: z.ZodError) {
return error.errors.map(err => ({
field: err.path.join('.'),
message: err.message,
}));
}
const result = articleCreateSchema.safeParse(invalidData);
if (!result.success) {
const errors = displayErrors(result.error);
// [
// { field: 'title', message: 'String must contain at least 1 character(s)' },
// { field: 'status', message: "Invalid enum value. Expected 'draft' | 'published' | 'archived'" }
// ]
}
```
### Custom Error Messages
```typescript theme={null}
const customSchema = articleCreateSchema.extend({
title: z.string()
.min(1, { message: 'Please enter a title' })
.max(255, { message: 'Title cannot exceed 255 characters' }),
status: z.enum(['draft', 'published', 'archived'], {
errorMap: () => ({ message: 'Please select a valid status' }),
}),
});
```
## Real-World Example: Multi-Step Form
```typescript components/CreateArticleWizard.tsx theme={null}
import { useState } from 'react';
import { articleCreateSchema } from '@/strapi/collections/article/schemas';
import type { ArticleCreateInput } from '@/strapi/collections/article/schemas';
import { articleService } from '@/strapi/collections/article/service';
// Split schema into steps
const step1Schema = articleCreateSchema.pick({
title: true,
slug: true,
excerpt: true,
});
const step2Schema = articleCreateSchema.pick({
content: true,
coverImage: true,
});
const step3Schema = articleCreateSchema.pick({
status: true,
author: true,
categories: true,
});
export function CreateArticleWizard() {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState>({});
const validateStep = (stepNum: number, data: unknown) => {
const schemas = [step1Schema, step2Schema, step3Schema];
return schemas[stepNum - 1].safeParse(data);
};
const handleNext = (stepData: unknown) => {
const result = validateStep(step, stepData);
if (result.success) {
setFormData({ ...formData, ...result.data });
setStep(step + 1);
} else {
console.error(result.error.errors);
}
};
const handleSubmit = async (finalStepData: unknown) => {
const finalData = { ...formData, ...finalStepData };
const result = articleCreateSchema.safeParse(finalData);
if (result.success) {
await articleService.create(result.data);
} else {
console.error(result.error.errors);
}
};
return (
{step === 1 && }
{step === 2 && }
{step === 3 && }
);
}
```
Zod schemas are automatically regenerated when you run `npx strapi2front sync`. Keep them in sync with your Strapi schema.
## Next Steps
Use validated data with generated services
Validate related content references
Upload files and validate media IDs
Understand TypeScript type generation