User
import { User } from '@app/core/schemas/User.schema'Location
- User.schema.ts
Zod Schema
What the schema would look like when defined with z.object() in Zod V3:
const User = z.object({
userId: z
.string()
.index()
.unique()
.describe("Auth provider sub or user ID"),
email: z
.string()
.index()
.unique()
.describe("Primary Github email used during OAuth"),
})(💡 Could be handy to copy-paste this schema info into an AI chat assistant)
Type Definition
You can extract the TypeScript type from the schema using z.input(), z.output() or z.infer() methods. e.g.:
type User = z.input<typeof User>What the resulting TypeScript type would look like:
{
/** Auth provider sub or user ID */
userId: string;
/** Primary Github email used during OAuth */
email: string;
}(💡 Could be handy to copy-paste this type info into an AI chat assistant)
Usage - Validation
To validate data against this schema, you have a few options:
// Throws if invalid
const user = User.parse(data)
// Returns { success: boolean, data?: T, error?: ZodError }
const user = User.safeParse(data)
This might be useful for parsing API input data or validating form data before submission.
You can also directly integrate this schema with form state managers like our own:
Usage - Form State
import { useFormState } from '@green-stack/forms/useFormState'
const formState = useFormState(User, {
initialValues: { /* ... */ }, // Provide initial values?
validateOnMount: true, // Validate on component mount?
})
Learn more about using schemas for form state in our Form Management Docs.
Usage - Component Props / Docs
Another potential use case for the ‘User’ schema is to type component props, provide default values and generate documentation for that component:
export const UserComponentProps = User.extend({
// Add any additional props here
})
export type UserComponentProps = z.input<typeof UserComponentProps>
/* --- <UserComponent/> --------------- */
export const UserComponent = (rawProps: UserComponentProps) => {
// Extract the props and apply defaults + infer resulting type
const props = ComponentProps.applyDefaults(rawProps)
// ... rest of the component logic ...
}
/* --- Documentation --------------- */
export const documentationProps = UserComponentProps.documentationProps('UserComponent')
Other
Disclaimer - Automatic Docgen
These dynamic schema docs were auto-generated with npm run regenerate-docs. This happens automatically for schema files in any \schemas\ folder. You can opt-out of this by adding // export const optOut = true somewhere in the file.