T
TanStack•2y ago
ambitious-aqua

Trouble with navigation after useMutation

Hi, I have a useMutation which gets called on an onSubmit to my login form. I call an endpoint on my server which returns a cookie with JWT token. All of this works correctly, however after I get the cookie i try to navigate to the /dashboard. It seems that if i do this right away the navigation does not work correctly but if i sleep for even a 100 ms it works (I have a before loader on the dashboard page that checks for the cookie being present). I'm guessing the cookies arent being set right away, and that a 100ms delay is enough for it to work but I'm not sure. I would really appreciate any help this is my first time working with TanStack. 
  const mutation = useMutation({
    mutationFn: async () => {
      try {
        const r = await axios
          .postForm<LoginType>("http://localhost:8000/login", {
            username: name,
            password: "100"
          }, {
            withCredentials: true,
          })
        console.log(r)
        return r.data
      } catch (err) {
        console.log(err)
      }
    },
    onSuccess: async () => {
      await sleep(100)
      navigate({ to: "/" })
    }
  })

  const handleLogin = async (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault()
    setIsSubmitting(true)

    mutation.mutate()
  }
  const mutation = useMutation({
    mutationFn: async () => {
      try {
        const r = await axios
          .postForm<LoginType>("http://localhost:8000/login", {
            username: name,
            password: "100"
          }, {
            withCredentials: true,
          })
        console.log(r)
        return r.data
      } catch (err) {
        console.log(err)
      }
    },
    onSuccess: async () => {
      await sleep(100)
      navigate({ to: "/" })
    }
  })

  const handleLogin = async (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault()
    setIsSubmitting(true)

    mutation.mutate()
  }
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?