11 replies

How to stop a form from submitting multiple times, even on slower network?

I have been developing an app recently, and during the testing I found some interesting bugs..

Short layout of the problem. It's a basic CRUD app, and while creating something I do that inside a form, and then I have a submit button which fires the onSubmit function. Inside the onSubmit function I do a mutation. And then in the mutation itself I redirect the user... E.g.

const Router = useRouter();

const createPostMutation = trpc.posts.create.useMutation({
  onSuccess: (data) => {
    Router.replace(`/my-posts/${data.id}`)
  }
})

const onSubmit = () => {
  createPostMutation.mutate({
    title: "Title",
    content: "Content"
  })
}

...

<form>
  ...

  <button type="submit" disabled={createPostMutation.isLoading}>Create post</button>
</form>

const Router = useRouter();

const createPostMutation = trpc.posts.create.useMutation({
  onSuccess: (data) => {
    Router.replace(`/my-posts/${data.id}`)
  }
})

const onSubmit = () => {
  createPostMutation.mutate({
    title: "Title",
    content: "Content"
  })
}

...

<form>
  ...

  <button type="submit" disabled={createPostMutation.isLoading}>Create post</button>
</form>

Now when I submit everything is created as you would normally expect. But the problem is if you have a slower connection, then while the Router is redirecting you, there is a split second where createPostMutation.isLoading is false, because it already finished, and you can in that moment click multiple times and it will create multiple posts...

I also tried creating a state like wasSubmitted which becomes true in the onSuccess callback, and then disable the mutation based on that... However, not even that helps...

Did anyone have the same problems and how did you solve it?

TTC

Theo's Typesafe Cult•3y ago•

11 replies

JulieCezar

How to stop a form from submitting multiple times, even on slower network?

const Router = useRouter();

const createPostMutation = trpc.posts.create.useMutation({
  onSuccess: (data) => {
    Router.replace(`/my-posts/${data.id}`)
  }
})

const onSubmit = () => {
  createPostMutation.mutate({
    title: "Title",
    content: "Content"
  })
}

...

<form>
  ...

  <button type="submit" disabled={createPostMutation.isLoading}>Create post</button>
</form>

const Router = useRouter();

const createPostMutation = trpc.posts.create.useMutation({
  onSuccess: (data) => {
    Router.replace(`/my-posts/${data.id}`)
  }
})

const onSubmit = () => {
  createPostMutation.mutate({
    title: "Title",
    content: "Content"
  })
}

...

<form>
  ...

  <button type="submit" disabled={createPostMutation.isLoading}>Create post</button>
</form>

How to stop a form from submitting multiple times, even on slower network?

Similar Threads

How to stop a form from submitting multiple times, even on slower network?

Similar Threads

Similar Threads

Similar Threads