checkpoint

Author: tannerlinsley

e2e/react-start/server-functions/src/routes/submit-post-formdata.tsx

@@ -33,7 +33,7 @@ function SubmitPostFormDataFn() {
     <div className="p-2 m-2 grid gap-2">
       <h3>Submit POST FormData Fn Call</h3>
       <div className="overflow-y-auto">
-        It should return navigate and return{' '}
+        It should navigate to a raw response of {''}
         <code>
           <pre data-testid="expected-submit-post-formdata-server-fn-result">
             Hello, {testValues.name}!

packages/start-client-core/src/client-rpc/serverFnFetcher.ts

@@ -17,6 +17,16 @@ import type { Plugin as SerovalPlugin } from 'seroval'
 
 let serovalPlugins: Array<SerovalPlugin<any, any>> | null = null
 
+// caller =>
+//   serverFnFetcher =>
+//     client =>
+//       server =>
+//         fn =>
+//       seroval =>
+//     client middleware =>
+//   serverFnFetcher =>
+// caller
+
 export async function serverFnFetcher(
   url: string,
   args: Array<any>,
@@ -37,7 +47,8 @@ export async function serverFnFetcher(
 
     // Arrange the headers
     const headers = new Headers({
-      'x-tsr-redirect': 'manual',
+      'x-tsr-serverFn': 'true',
+      'x-tsr-createServerFn': 'true',
       ...(first.headers instanceof Headers
         ? Object.fromEntries(first.headers.entries())
         : first.headers),
@@ -65,12 +76,6 @@ export async function serverFnFetcher(
       }
     }
 
-    if (url.includes('?')) {
-      url += `&createServerFn`
-    } else {
-      url += `?createServerFn`
-    }
-
     let body = undefined
     if (first.method === 'POST') {
       const fetchBody = await getFetchBody(first)
@@ -97,6 +102,7 @@ export async function serverFnFetcher(
     handler(url, {
       method: 'POST',
       headers: {
+        'x-tsr-serverFn': 'true',
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
@@ -165,7 +171,7 @@ async function getFetchBody(
 async function getResponse(fn: () => Promise<Response>) {
   const response = await (async () => {
     try {
-      return await fn()
+      return await fn() // client => server => fn => server => client
     } catch (error) {
       if (error instanceof Response) {
         return error
@@ -178,22 +184,16 @@ async function getResponse(fn: () => Promise<Response>) {
   if (response.headers.get(X_TSS_RAW_RESPONSE) === 'true') {
     return response
   }
+
   const contentType = response.headers.get('content-type')
   invariant(contentType, 'expected content-type header to be set')
   const serializedByStart = !!response.headers.get(X_TSS_SERIALIZED)
-  // If the response is not ok, throw an error
-  if (!response.ok) {
-    if (serializedByStart && contentType.includes('application/json')) {
-      const jsonPayload = await response.json()
-      const result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins! })
-      throw result
-    }
-
-    throw new Error(await response.text())
-  }
 
+  // If the response is serialized by the start server, we need to process it
+  // differently than a normal response.
   if (serializedByStart) {
     let result
+    // If it's a stream from the start serializer, process it as such
     if (contentType.includes('application/x-ndjson')) {
       const refs = new Map()
       result = await processServerFnResponse({
@@ -206,17 +206,22 @@ async function getResponse(fn: () => Promise<Response>) {
         },
       })
     }
+    // If it's a JSON response, it can be simpler
     if (contentType.includes('application/json')) {
       const jsonPayload = await response.json()
       result = fromCrossJSON(jsonPayload, { plugins: serovalPlugins! })
     }
+
     invariant(result, 'expected result to be resolved')
     if (result instanceof Error) {
       throw result
     }
+
     return result
   }
 
+  // If it wasn't processed by the start serializer, check
+  // if it's JSON
   if (contentType.includes('application/json')) {
     const jsonPayload = await response.json()
     const redirect = parseRedirect(jsonPayload)
@@ -229,6 +234,12 @@ async function getResponse(fn: () => Promise<Response>) {
     return jsonPayload
   }
 
+  // Othwerwise, if it's not OK, throw the content
+  if (!response.ok) {
+    throw new Error(await response.text())
+  }
+
+  // Or return the response itself
   return response
 }
 

packages/start-client-core/src/constants.ts

@@ -6,4 +6,5 @@ export const TSS_SERVER_FUNCTION_FACTORY = Symbol.for(
 
 export const X_TSS_SERIALIZED = 'x-tss-serialized'
 export const X_TSS_RAW_RESPONSE = 'x-tss-raw'
+export const X_TSS_CONTEXT = 'x-tss-context'
 export {}

packages/start-client-core/src/createServerFn.ts

@@ -1,9 +1,9 @@
 import { mergeHeaders } from '@tanstack/router-core/ssr/client'
 
+import { isRedirect, parseRedirect } from '@tanstack/router-core'
 import { TSS_SERVER_FUNCTION_FACTORY } from './constants'
 import { getStartOptions } from './getStartOptions'
 import { getStartContextServerOnly } from './getStartContextServerOnly'
-import type { TSS_SERVER_FUNCTION } from './constants'
 import type {
   AnyValidator,
   Constrain,
@@ -15,6 +15,7 @@ import type {
   ValidateSerializableInput,
   Validator,
 } from '@tanstack/router-core'
+import type { TSS_SERVER_FUNCTION } from './constants'
 import type {
   AnyFunctionMiddleware,
   AnyRequestMiddleware,
@@ -120,6 +121,11 @@ export const createServerFn: CreateServerFn<Register> = (options, __opts) => {
             context: {},
           })
 
+          const redirect = parseRedirect(result.error)
+          if (redirect) {
+            throw redirect
+          }
+
           if (result.error) throw result.error
           return result.result
         },
@@ -143,14 +149,18 @@ export const createServerFn: CreateServerFn<Register> = (options, __opts) => {
               request: startContext.request,
             }
 
-            return executeMiddleware(resolvedMiddleware, 'server', ctx).then(
-              (d) => ({
-                // Only send the result and sendContext back to the client
-                result: d.result,
-                error: d.error,
-                context: d.sendContext,
-              }),
-            )
+            const result = await executeMiddleware(
+              resolvedMiddleware,
+              'server',
+              ctx,
+            ).then((d) => ({
+              // Only send the result and sendContext back to the client
+              result: d.result,
+              error: d.error,
+              context: d.sendContext,
+            }))
+
+            return result
           },
         },
       ) as any
@@ -257,6 +267,22 @@ export async function executeMiddleware(
           next: userNext as any,
         } as any)
 
+        // If result is NOT a ctx object, we need to return it as
+        // the { result }
+        if (isRedirect(result)) {
+          return {
+            ...ctx,
+            error: result,
+          }
+        }
+
+        if (result instanceof Response) {
+          return {
+            ...ctx,
+            result,
+          }
+        }
+
         if (!(result as any)) {
           throw new Error(
             'User middleware returned undefined. You must call next() or return a result in your middlewares.',

packages/start-client-core/src/index.tsx

@@ -84,6 +84,7 @@ export {
   TSS_SERVER_FUNCTION,
   X_TSS_SERIALIZED,
   X_TSS_RAW_RESPONSE,
+  X_TSS_CONTEXT,
 } from './constants'
 
 export type * from './serverRoute'

packages/start-server-core/src/createStartHandler.ts

@@ -268,16 +268,17 @@ export function createStartHandler<TRegister = Register>(
       [...middlewares, requestHandlerMiddleware],
       {
         request,
-
         context: requestOpts?.context || {},
       },
     )
 
     const response: Response = ctx.response
 
+    console.log('response', response)
+
     if (isRedirect(response)) {
       if (isResolvedRedirect(response)) {
-        if (request.headers.get('x-tsr-redirect') === 'manual') {
+        if (request.headers.get('x-tsr-createServerFn') === 'true') {
           return json(
             {
               ...response.options,
@@ -318,7 +319,7 @@ export function createStartHandler<TRegister = Register>(
       const router = await getRouter()
       const redirect = router.resolveRedirect(response)
 
-      if (request.headers.get('x-tsr-redirect') === 'manual') {
+      if (request.headers.get('x-tsr-createServerFn') === 'true') {
         return json(
           {
             ...response.options,