Using Server Functions with progressive enhancement

[nicholasgriffintn]

What's the correct way to use server functions with progressive enhancement?

it's documented that it can be done with .url but i can't see to figure it out:

https://tanstack.com/start/latest/docs/framework/react/guide/server-functions#progressive-enhancement

I have a form that posts:

<form method="post" action={createBookmark.url}>
				<input type="hidden" name="year" value={year} />
				<input type="hidden" name="type" value={type} />
				<input type="hidden" name="slug" value={slug} />
				<input type="hidden" name="status" value={nextStatus} />
				<input type="hidden" name="returnTo" value={returnTo} />
				<Button
					variant="outline"
					disabled={!canSubmit}
					title={
						canSubmit
							? "Bookmark this item"
							: "Sign in to bookmark events"
					}
					type="submit"
				>
					<Icons.star
						className={status === "favourited" ? "icon--filled" : ""}
					/>
				</Button>
			</form>

And I have the serverFn setup:

export const createBookmark = createServerFn({
	method: "POST",
})
	.inputValidator(
		(data: {
			year: number;
			type: string;
			slug: string;
			status: string;
			returnTo?: string;
		}) => data,
	)
	.handler(async (ctx) => {
		const { year, type, slug, status, returnTo } = ctx.data;

		if (!type || !slug || !status) {
			throw new Error("Invalid request");
		}

I always seem to get an error back, can't figure it out.

Error is: {"t":25,"i":0,"s":{"message":{"t":1,"s":"Invalid request"}},"c":"$TSR/Error"}

i logged ctx, the data is empty so maybe I presumed the usage of a form wrong:

{
  "functionId": "eyJmaWxlIjoiL0BpZC9zcmMvc2VydmVyL2Z1bmN0aW9ucy9ib29rbWFya3MudHM_dHNyLWRpcmVjdGl2ZS11c2Utc2VydmVyPSIsImV4cG9ydCI6ImNyZWF0ZUJvb2ttYXJrX2NyZWF0ZVNlcnZlckZuX2hhbmRsZXIifQ",
  "context": {},
  "data": {},
  "signal": {},
  "request": {},
  "headers": {},
  "sendContext": {}
}

Any help would be appreciated, hoping for a rubber duck moment where i suddenly figure it out after posting this.

[schiller-manuel]

checkout https://github.com/TanStack/router/blob/main/e2e/react-start/server-functions/src/routes/submit-post-formdata.tsx

you need to use FormData

[nicholasgriffintn]

Oh of course! I should have looked at the e2e tests, didn't think of that. I also wrongly assumed it would do some magic, thankfully it doesn't and i do have to do some work.

I'll get on that, thanks!

[schiller-manuel]

if the docs need improvement we welcome any contribution here!

[nicholasgriffintn]

A great shout! I think an example would have helped me best here as I just needed to get out of my own head tbh. I'm happy to have a think on that.

There are great examples like this one: https://tanstack.com/start/latest/docs/framework/react/examples/start-basic

Maybe just one around TanStack Start for Progressive Enhancement in general and then just link to that off the guide page.