How to use TRPC inside handleSubmit

Hey, trying to create a form and inside the handleSubmit make a call to a query in my router, heres the code

function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    const formObject = formSchema.parse(Object.fromEntries(formData.entries()));
    api.card.updateCard.useQuery(formObject);
  }

function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    const formObject = formSchema.parse(Object.fromEntries(formData.entries()));
    api.card.updateCard.useQuery(formObject);
  }

function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    const formObject = formSchema.parse(Object.fromEntries(formData.entries()));
    api.card.updateCard.useQuery(formObject);
  }

function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    const formObject = formSchema.parse(Object.fromEntries(formData.entries()));
    api.card.updateCard.useQuery(formObject);
  }

The error I'm getting is

Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Is there a different flow for making trpc calls inside a form submit?

Rules of Hooks – React

The library for web and native user interfaces

How to use TRPC inside handleSubmit

Similar Threads

Similar Threads

Similar Threads