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);
  }

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: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. 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

1 Reply

cje•17mo ago

https://stackoverflow.com/questions/75354721/how-to-make-an-api-request-with-trpc-and-nextjs-without-an-invalid-hook-call-err/75416639#75416639

Stack Overflow

How to make an API request with tRPC and NextJS without an invalid ...

I'm trying to send user input data to my tRPC API. When I try to send my query, I get an error that I can only use React Hooks inside a function component. I believe I can't call tRPC's useQuery fr...

Gaming

Programming

How to use TRPC inside handleSubmit