Server function isn't called
I started learning router and start. In the following code,
login()login() is only called, when the response is used afterwards (like in console.log(response)console.log(response)). But when I remove console.log(response)console.log(response), login()login() is not called anymore. Why is that? import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
export const Route = createFileRoute('/_auth/login')({
component: Login,
})
const login = createServerFn({ method: 'POST' })
.validator((user: unknown) => user as string)
.handler(async ({ data: user }) => {
console.log('login is called')
return `Hello, ${user}! `
})
function Login() {
return (
<div>
<div>Route "/_auth/login"</div>
<form
method="POST"
onSubmit={async (event) => {
console.log('submit')
event.preventDefault()
// When I don't use response afterwards, login() is not called
const response = await login({ data: "blubb" })
// When I uncomment the next line and use response with console.log, login() is called
// console.log(response)
}}
>
<button type="submit">Login</button>
</form>
</div>
)
}import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
export const Route = createFileRoute('/_auth/login')({
component: Login,
})
const login = createServerFn({ method: 'POST' })
.validator((user: unknown) => user as string)
.handler(async ({ data: user }) => {
console.log('login is called')
return `Hello, ${user}! `
})
function Login() {
return (
<div>
<div>Route "/_auth/login"</div>
<form
method="POST"
onSubmit={async (event) => {
console.log('submit')
event.preventDefault()
// When I don't use response afterwards, login() is not called
const response = await login({ data: "blubb" })
// When I uncomment the next line and use response with console.log, login() is called
// console.log(response)
}}
>
<button type="submit">Login</button>
</form>
</div>
)
}
