form-mutation

Wire React Hook Form with Relay mutations and Yup validation for form workflows.

26|7|Updated Apr 21, 2022

Search Tags:#typescript #validation #form #relay #mutation #react-hook-form #yup

Ready to run

npx skills add https://github.com/cap-collectif/cap-collectif --skill form-mutation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: form-mutation
Source: https://github.com/cap-collectif/cap-collectif/tree/main/.claude/skills/form-mutation
Command: npx skills add https://github.com/cap-collectif/cap-collectif --skill form-mutation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building dynamic forms that submit through GraphQL mutations can be verbose and error-prone. This Skill stitches together React Hook Form, Yup validation, and Relay mutations to deliver reliable, user-friendly forms with consistent error handling.

Core Features & Use Cases

React Hook Form + Yup Validation: Declarative form state and schema-based validation to reduce boilerplate.
Relay Mutation Integration: Seamless submission via Relay mutations with optimistic UI and robust error handling.
Error Handling & Internationalized Messages: Centralized toast and field-level errors to guide users during submission.
Use Case: Build an admin form to create or update entities with server-side validation and clear feedback on success or failure.

Quick Start

Create a new EntityForm bound to a Relay mutation and validate fields with a Yup schema.

Frequently Asked Questions about form-mutation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build React forms that submit data via Relay mutations?▼

To build React forms that submit data via Relay mutations, you wire React Hook Form with a Yup validation schema and Relay mutation submission. This pattern uses FormProvider to handle validation, errors, and success states reliably.

What is the best way to handle GraphQL mutation errors in React Hook Form?▼

Handling GraphQL mutation errors in React Hook Form involves centralized toast notifications and field-level error mapping. By stitching together Relay mutations with Yup validation, the form provides robust error handling and internationalized messages to guide users during submission.

How does Yup validation integrate with React Hook Form for admin interfaces?▼

Yup validation integrates with React Hook Form to provide declarative form state and schema-based validation for admin interfaces. This combination reduces boilerplate when creating or updating entities, ensuring server-side validation and clear feedback on submission success or failure.

Can I use React Hook Form with Relay mutations and optimistic UI?▼

Yes, you can use React Hook Form with Relay mutations to achieve optimistic UI. The integration enables seamless submission via Relay mutations while maintaining robust error handling and consistent user feedback across admin and user interfaces.

Do I need a Yup schema to validate form state before submitting a Relay mutation?▼

Yes, you need a Yup schema to validate form state before submitting a Relay mutation. The schema-based validation enforces data integrity declaratively, reducing boilerplate and ensuring reliable data submission through the FormProvider pattern.