createServerFn cannot read cookie in same request after setting it

[axuj]

Which project does this relate to?

Start

When using createServerFn, if I set a cookie using setCookie from @tanstack/react-start/server and then immediately try to read it back using getCookie within the same server function call, the cookie is not found. This behavior occurs because cookies are only available to the browser after the response is sent to the client. However, for certain use cases where you need to set and immediately validate a cookie within the same request context, this creates a limitation.

The expected behavior would be that once a cookie is set in the current request context, subsequent calls to getCookie within the same request should be able to retrieve the recently set value.

Next.js supports reading cookies immediately after setting them within the same request context.

Your Example Website or App

https://tanstack.com/start/latest/docs/framework/react/examples/start-basic?panel=code

Steps to Reproduce the Bug or Issue

1. clone example
2. write

export const setCookieFn = createServerFn({ method: "POST" })
	.inputValidator((d: { name: string; value: string }) => d)
	.handler(async ({ data }) => {
		const { name, value } = data;
		setCookie(name, value, {
			httpOnly: true,
			path: "/",
		});
		return { success: true, message: `Cookie ${name} set to ${value}` };
	});

export const getCookieValue = createServerFn({ method: "GET" })
	.inputValidator((d: { name: string }) => d)
	.handler(async ({ data }) => {
		const { name } = data;
		const value = getCookie(name);
		console.log(`Getting cookie ${name}:`, value);
		return { name, value: value || null };
	});

export const tsetFull = createServerFn({ method: "POST" })
	.inputValidator((name: string) => name)
	.handler(async ({ data }) => {
		await setCookieFn({
			data: {
				name: "name",
				value: data,
			},
		});
		const res = await getCookieValue({
			data: {
				name: "name",
			},
		});
		return res;
	});

Expected behavior

When calling tsetFull with input value "test1", it should return { name: "name", value: "test1" }. The cookie set in the setCookieFn call should be immediately readable by the subsequent getCookieValue call within the same server function execution context.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.133.27
• OS: Windows
• Browser: edge
• Browser Version: 141.0.3537.92
• Bundler: Vite
• Bundler Version: 7.1.12

Additional context

Anonymous login system that sets a cookie when entering the page, which is then used for authentication in subsequent workflow operations to read/write data for the anonymous user.

[schiller-manuel]

this is not a bug.
right now getCookie will just give you whatever the request contained, but nothing from the response that is yet to be sent out.

this issue can be seen as a feature request that may or may not be implemented in the future, let's see.

IMO a better way is to use middleware context to set authentication values and not rely on response cookie information.

[axuj]

this is not a bug. right now getCookie will just give you whatever the request contained, but nothing from the response that is yet to be sent out.

this issue can be seen as a feature request that may or may not be implemented in the future, let's see.

IMO a better way is to use middleware context to set authentication values and not rely on response cookie information.

Thank you for your reply. I agree that middleware feels more intuitive, but I haven't found a way to share middleware context between two server functions. Here's an example:

export const cacheMidderware = createMiddleware({
	type: "function",
}).server(async ({ next, context }) => {
	if (context?.cache) {
		return next({ context });
	}

	console.log("create cache");
	const cache = new Map();
	return next({
		context: {
			cache,
		},
	});
});

export const startInstance = createStart(() => {
	return {
		functionMiddleware: [cacheMidderware],
	};
});

const setCache = createServerFn({ method: "POST" })
	.inputValidator((d: { name: string; value: string }) => d)
	.handler(({ data, context }) => {
		return context.cache.set(data.name, data.value);
	});

const getCache = createServerFn({ method: "GET" })
	.inputValidator((d: { name: string }) => d)
	.handler(({ data, context }) => {
		return context.cache.get(data.name);
	});

export const tsetFullCache = createServerFn({ method: "POST" })
	.inputValidator((name: string) => name)
	.handler(async ({ data }) => {
		await setCache({
			data: {
				name: "name",
				value: data,
			},
		});
		const res = await getCache({
			data: {
				name: "name",
			},
		});
		return res;
	});

However, testFullCache doesn't retrieve the information from the middleware, and console.log("create cache") executes three times.

oRPC provides a sharing mechanism, but I haven't seen a similar mechanism in TanStack Start's documentation
https://orpc.unnoq.com/docs/best-practices/dedupe-middleware

[axuj]

I found it. It's defined in the src\server.ts, like this

import handler from "@tanstack/react-start/server-entry";

declare module "@tanstack/react-start" {
	interface Register {
		server: {
			requestContext: {
				cache: Map<string, any>;
			};
		};
	}
}

export default {
	fetch(request: Request) {
		return handler.fetch(request, {
			context: {
				cache: new Map(),
			},
		});
	},
};

[axuj]

@schiller-manuel Hi, I've encountered a new issue. I'm not sure if it's a problem with my configuration or a bug. After configuring the request-level context using the previous method, the type inference in the API route shows that there is a context, but it doesn't actually exist during runtime.

[hokkyss]

@axuj

That should be a separate issue as it is already out of topic, instead of re-opening this issue and reporting another different problem :).

Also, it is #5439