Open
Conversation
🚀 Major new feature: Complete React Query integration for el-form ## New Hooks & Features - ✨ useFormWithMutation: Core React Query integration with automatic error mapping - ✨ useApiForm: Simple REST API integration for common use cases - ✨ useMutationForm: Custom mutation function support with full React Query features - ✨ useValidationForm: Server-side validation before submission - ✨ useOptimisticForm: Optimistic updates with automatic rollback on error ## Error Handling System - 🛡️ Built-in error extractors for Standard, GraphQL, Zod, and Array error formats - 🎯 Automatic mapping from server responses to form field errors - 🔧 Custom error extraction function support ## Documentation & Examples - 📚 Comprehensive React Query integration guide (docs/react-query.md) - 📖 Updated all main documentation pages with React Query references - 🎨 Added React Query examples to examples page - 📋 Complete implementation guide (REACT_QUERY_INTEGRATION.md) - 🧪 Working test component with real examples ## Developer Experience - 🔒 Full TypeScript support with generics - 🔄 Zero breaking changes - progressive enhancement - 📦 Modular design - each hook works independently - ⚡ Fallback support when React Query not installed ## Documentation Updates - Updated sidebar navigation structure - Enhanced intro, quick-start, examples, and advanced guides - Added cross-references and navigation flow - Fixed sidebar positioning for all documentation pages Enables server-side validation, mutation error handling, optimistic updates, and seamless API integration while maintaining the clean, developer-friendly API that el-form is known for.
There was a problem hiding this comment.
Pull Request Overview
This PR adds full React Query support to the form hooks library by introducing a core integration hook and convenient high-level APIs, updating types for root-level errors, and updating documentation and examples.
- Introduce
useFormWithMutationto wrap forms with React Query mutations - Add high-level hooks:
useApiForm,useMutationForm,useValidationForm, anduseOptimisticForm - Extend form state types to include
"root"errors and export new hooks
Reviewed Changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/el-form-react-hooks/src/useFormWithMutation.ts | Core React Query integration hook |
| packages/el-form-react-hooks/src/useApiForm.ts | Convenience hooks for REST, custom mutations, etc. |
| packages/el-form-react-hooks/src/types.ts | Extended error type to support "root" entries |
| packages/el-form-react-hooks/src/index.ts | Export new React Query–based hooks |
| docs/docs/examples.md | Example outdated props/names updated for React Query |
Comments suppressed due to low confidence (5)
docs/docs/examples.md:542
- The
useApiFormhook no longer accepts aschemaprop. Rename this tovalidators: { onChange: userSchema }to match the actual API signature.
schema: userSchema,
docs/docs/examples.md:543
useApiFormexpectssubmitUrlandsubmitMethodrather thanurlandmethod. Update the example tosubmitUrl: "/api/users".
url: "/api/users",
docs/docs/examples.md:562
- The example uses
form.errors, but the new API stores errors underform.formState.errors. Update references accordingly.
{form.errors.name && (
packages/el-form-react-hooks/src/useFormWithMutation.ts:129
- Consider adding unit tests for
useFormWithMutationto verify that field and root error extraction andclearErrorson success work as intended.
export function useFormWithMutation<
packages/el-form-react-hooks/src/useFormWithMutation.ts:144
- User-supplied
onSettledcallbacks inmutationOptions.mutationare not forwarded. Consider extracting and invokingmutationOptions.mutation.onSettledinside your wrapper so that customonSettledlogic is not silently ignored.
const mutation = useMutation({
| : errorExtractor; | ||
|
|
||
| // Default API submission function | ||
| const defaultSubmitFn = useCallback( |
There was a problem hiding this comment.
The useCallback dependency list includes the headers object, which may be re-created on every render if not memoized, causing unnecessary re-creations of defaultSubmitFn. Consider memoizing or allowing stable headers references.
…field validation - Add useFieldQuery hook with smart debouncing and React Query integration - Create useDebounce utility for optimized validation timing - Add fallback implementation when React Query is not available - Include comprehensive example with username availability checking - Export new validation hooks from main package - Full TypeScript support with proper error handling - Progressive enhancement design - works with or without React Query This establishes the foundation for query-based validation, enabling real-time server-side field validation with caching, background sync, and excellent UX.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.