like-gold

Server function isn't called

I started learning router and start. In the following code, login() is only called, when the response is used afterwards (like in console.log(response)). But when I remove console.log(response), 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>
  )
}

2 Replies

afraid-scarlet•10mo ago

this probably caused by a bug in the dead code removal I investigated a similar issue can you please create a GitHub issue including a minimal example?

like-goldOP•10mo ago

Sure. Thanks for your response 🙂

Gaming

Programming

Server function isn't called

Did you find this page helpful?