fix: type for use with decode-formdata (#2052)

Author: icopp

.changeset/lucky-beds-rush.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-form-nextjs': patch
+'@tanstack/react-form-remix': patch
+'@tanstack/react-form-start': patch
+---
+
+Fixes bad inference from `decode-formdata`'s weird typing of the `decode` function, including handling how it incorrectly doesn't handle undefined values for the form info object.

packages/react-form-nextjs/src/createServerValidate.ts

@@ -14,6 +14,7 @@ import type {
   ServerFormState,
   UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/react-form'
+import type { FormDataInfo } from 'decode-formdata'
 
 interface CreateServerValidateOptions<
   TFormData,
@@ -75,7 +76,7 @@ export const createServerValidate =
       TSubmitMeta
     >,
   ) =>
-  async (formData: FormData, info?: Parameters<typeof decode>[1]) => {
+  async (formData: FormData, info?: FormDataInfo) => {
     const { onServerValidate } = defaultOpts
 
     const runValidator = async ({
@@ -98,7 +99,9 @@ export const createServerValidate =
       })
     }
 
-    const values = decode(formData, info) as never as TFormData
+    const values = (info
+      ? decode(formData, info)
+      : decode(formData)) as never as TFormData
 
     const onServerError = (await runValidator({
       value: values,

packages/react-form-remix/src/createServerValidate.ts

@@ -14,6 +14,7 @@ import type {
   ServerFormState,
   UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/react-form'
+import type { FormDataInfo } from 'decode-formdata'
 
 interface CreateServerValidateOptions<
   TFormData,
@@ -75,7 +76,7 @@ export const createServerValidate =
       TSubmitMeta
     >,
   ) =>
-  async (formData: FormData, info?: Parameters<typeof decode>[1]) => {
+  async (formData: FormData, info?: FormDataInfo) => {
     const { onServerValidate } = defaultOpts
 
     const runValidator = async ({
@@ -98,7 +99,9 @@ export const createServerValidate =
       })
     }
 
-    const values = decode(formData, info) as never as TFormData
+    const values = (info
+      ? decode(formData, info)
+      : decode(formData)) as never as TFormData
 
     const onServerError = (await runValidator({
       value: values,

packages/react-form-start/src/createServerValidate.tsx

@@ -17,6 +17,7 @@ import type {
   ServerFormState,
   UnwrapFormAsyncValidateOrFn,
 } from '@tanstack/react-form'
+import type { FormDataInfo } from 'decode-formdata'
 
 interface CreateServerValidateOptions<
   TFormData,
@@ -57,7 +58,7 @@ const serverFn = createServerFn({ method: 'POST' })
   .handler(async ({ data }) => {
     const { formData, info, defaultOpts } = data as {
       formData: FormData
-      info?: Parameters<typeof decode>[1]
+      info?: FormDataInfo
       defaultOpts: CreateServerValidateOptions<
         any,
         any,
@@ -97,7 +98,9 @@ const serverFn = createServerFn({ method: 'POST' })
 
     const referer = getRequestHeader('referer')!
 
-    const decodedData = decode(formData, info) as never as any
+    const decodedData = (info
+      ? decode(formData, info)
+      : decode(formData)) as never as any
 
     const onServerError = (await runValidator({
       value: decodedData,