feat(zod): formatted errors instead of flattened BREAKING CHANGE

This enables nested field error checking as the `user.name` error in the test, which is no longer on the `user` field.
MiroslavPetrik · Sep 25, 2024 · 45d9f79 · 45d9f79
1 parent d36b0ab
commit 45d9f79
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",

diff --git a/src/formAction.test.ts b/src/formAction.test.ts
@@ -171,11 +171,19 @@ describe("formAction", () => {
         expect(result).toHaveProperty("data", null);
         expect(result).toHaveProperty("error", null);
         expect(result).toHaveProperty("validationError", {
-          fieldErrors: {
-            allright: ["Invalid input"],
-            user: ["String must contain at least 3 character(s)"],
+          _errors: [],
+          allright: {
+            _errors: [
+              'Invalid literal value, expected "on"',
+              "Invalid literal value, expected undefined",
+            ],
+          },
+          user: {
+            _errors: [],
+            name: {
+              _errors: ["String must contain at least 3 character(s)"],
+            },
           },
-          formErrors: [],
         });
       });
     });
@@ -226,10 +234,8 @@ describe("formAction", () => {
       );
 
       expect(result).toHaveProperty("validationError", {
-        fieldErrors: {
-          confirm: ["Passwords don't match"],
-        },
-        formErrors: [],
+        _errors: [],
+        confirm: { _errors: ["Passwords don't match"] },
       });
       expect(result).toHaveProperty("error", null);
     });

diff --git a/src/formAction.ts b/src/formAction.ts
@@ -164,34 +164,34 @@ function formActionBuilder<
     schema === emptyInput
       ? undefined
       : <Data>(action: SchemaAction<Data, Context, RealSchema>) => {
-          return createFormAction<
-            Data,
-            Err,
-            z.inferFlattenedErrors<RealSchema>
-          >(({ success, failure, invalid }) => {
-            const formDataSchema = zfd.formData(schema);
-
-            return async (state, formData) => {
-              const ctx = await createContext(formData);
-              const result = formDataSchema.safeParse(formData);
-
-              if (!result.success) {
-                return invalid(result.error.flatten());
-              }
-
-              const input = result.data as z.infer<RealSchema>;
-
-              try {
-                return success(await action({ input, ctx }));
-              } catch (error) {
-                if (processError) {
-                  return failure(processError({ error, ctx }));
+          return createFormAction<Data, Err, z.inferFormattedError<RealSchema>>(
+            ({ success, failure, invalid }) => {
+              const formDataSchema = zfd.formData(schema);
+
+              return async (state, formData) => {
+                const ctx = await createContext(formData);
+                const result = formDataSchema.safeParse(formData);
+
+                if (!result.success) {
+                  return invalid(
+                    result.error.format() as z.inferFormattedError<RealSchema>,
+                  );
                 }
-                // must be handled by error boundary
-                throw error;
-              }
-            };
-          });
+
+                const input = result.data as z.infer<RealSchema>;
+
+                try {
+                  return success(await action({ input, ctx }));
+                } catch (error) {
+                  if (processError) {
+                    return failure(processError({ error, ctx }));
+                  }
+                  // must be handled by error boundary
+                  throw error;
+                }
+              };
+            },
+          );
         };
 
   return {