fixed infered type from useServerFn + added type test

examples/react/start-basic-react-query/src/routes/index.tsx

@@ -1,12 +1,36 @@
+import * as React from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn, useServerFn } from '@tanstack/react-start'
+
+const greetUser = createServerFn({ method: 'POST' })
+  .inputValidator((input: { name: string }) => input)
+  .handler(async ({ data }) => {
+    return Promise.resolve({ message: `Hello ${data.name}!` })
+  })
+
 export const Route = createFileRoute('/')({
   component: Home,
 })
 
 function Home() {
+  const greetingMutation = useMutation({
+    mutationFn: useServerFn(greetUser),
+    onSuccess: (data) => data,
+  })
+
   return (
-    <div className="p-2">
-      <h3>Welcome Home!!!</h3>
+    <div className="p-2 flex flex-col gap-2">
+      <h3>useServerFn + useMutation demo</h3>
+      <button
+        className="rounded bg-blue-500 px-3 py-1 text-white"
+        onClick={() => greetingMutation.mutate({ data: { name: 'TanStack' } })}
+      >
+        Say hi
+      </button>
+      {greetingMutation.data ? (
+        <p data-testid="greeted">{greetingMutation.data.message}</p>
+      ) : null}
     </div>
   )
 }

packages/react-start/src/tests/useServerFnMutation.test-d.tsx

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query'
+import { createServerFn, useServerFn } from '../index'
+
+const serverFn = createServerFn({ method: 'POST' })
+  .inputValidator((input: { name: string }) => input)
+  .handler(async ({ data }) => ({
+    message: `Hello ${data.name}!`,
+  }))
+
+useMutation({
+  mutationFn: useServerFn(serverFn),
+  onSuccess: (data) => {
+    data.message
+  },
+})

packages/react-start/src/useServerFn.ts

@@ -1,30 +1,45 @@
 import * as React from 'react'
 import { isRedirect, useRouter } from '@tanstack/react-router'
 
+type AwaitedReturn<T extends (...args: Array<any>) => Promise<any>> = Awaited<
+  ReturnType<T>
+>
+
+type UseServerFnReturn<T extends (...args: Array<any>) => Promise<any>> =
+  Parameters<T> extends []
+    ? () => Promise<AwaitedReturn<T>>
+    : Parameters<T> extends [infer TVariables]
+      ? (variables: TVariables) => Promise<AwaitedReturn<T>>
+      : (...args: Parameters<T>) => Promise<AwaitedReturn<T>>
+
 export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
   serverFn: T,
-): (...args: Parameters<T>) => ReturnType<T> {
+): UseServerFnReturn<T> {
   const router = useRouter()
 
-  return React.useCallback(
-    async (...args: Array<any>) => {
+  const handler = React.useCallback(
+    async (...args: Parameters<T>) => {
       try {
         const res = await serverFn(...args)
 
         if (isRedirect(res)) {
           throw res
         }
 
-        return res
+        return res as AwaitedReturn<T>
       } catch (err) {
         if (isRedirect(err)) {
           err.options._fromLocation = router.state.location
-          return router.navigate(router.resolveRedirect(err).options)
+          return router.navigate(
+            router.resolveRedirect(err).options,
+          ) as AwaitedReturn<T>
         }
 
         throw err
       }
     },
     [router, serverFn],
-  ) as any
+  )
+
+  return handler as UseServerFnReturn<T>
 }

packages/solid-start/src/useServerFn.ts

@@ -1,26 +1,41 @@
 import { isRedirect, useRouter } from '@tanstack/solid-router'
 
+type AwaitedReturn<T extends (...args: Array<any>) => Promise<any>> = Awaited<
+  ReturnType<T>
+>
+
+type UseServerFnReturn<T extends (...args: Array<any>) => Promise<any>> =
+  Parameters<T> extends []
+    ? () => Promise<AwaitedReturn<T>>
+    : Parameters<T> extends [infer TVariables]
+      ? (variables: TVariables) => Promise<AwaitedReturn<T>>
+      : (...args: Parameters<T>) => Promise<AwaitedReturn<T>>
+
 export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
   serverFn: T,
-): (...args: Parameters<T>) => ReturnType<T> {
+): UseServerFnReturn<T> {
   const router = useRouter()
 
-  return (async (...args: Array<any>) => {
+  const handler = async (...args: Parameters<T>) => {
     try {
       const res = await serverFn(...args)
 
       if (isRedirect(res)) {
         throw res
       }
 
-      return res
+      return res as AwaitedReturn<T>
     } catch (err) {
       if (isRedirect(err)) {
         err.options._fromLocation = router.state.location
-        return router.navigate(router.resolveRedirect(err).options)
+        return router.navigate(
+          router.resolveRedirect(err).options,
+        ) as AwaitedReturn<T>
       }
 
       throw err
     }
-  }) as any
+  }
+
+  return handler as UseServerFnReturn<T>
 }