How can I hit my trpc endpoint in a event handler?

I am trying to hit one of my trpc end points on form submit but i keep breaking rules of hooks

7 Replies

w.ham•2y ago

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("Submitted form values:", formValues);
    interface testtype {
      style: string;
      userId: string;
      prompt: string;
      type: string;
      shape: string;
      color: string;
    }
    const test: testtype = {
      style: "realism",
      userId: "clg5knnzg0000s78t69ue2dh2",
      prompt: "a dancing panda",
      type: "regular",
      shape: "circular",
      color: "red",
    };
    api.generateImages.generateImage.useQuery(test);
  };

  return (
    <form onSubmit={handleSubmit} className="mx-auto max-w-md py-20">

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("Submitted form values:", formValues);
    interface testtype {
      style: string;
      userId: string;
      prompt: string;
      type: string;
      shape: string;
      color: string;
    }
    const test: testtype = {
      style: "realism",
      userId: "clg5knnzg0000s78t69ue2dh2",
      prompt: "a dancing panda",
      type: "regular",
      shape: "circular",
      color: "red",
    };
    api.generateImages.generateImage.useQuery(test);
  };

  return (
    <form onSubmit={handleSubmit} className="mx-auto max-w-md py-20">

heres what I am doing

cje•2y ago

https://stackoverflow.com/questions/74830632/trpc-invalid-hook-call-in-react-function-component/75420436?noredirect=1#comment133956053_75420436

Stack Overflow

tRPC invalid hook call in react function component

I am trying to create a new user when the user connects to the site with their wallet. When the user clicks the button to connect, the useAccount hook will return an address of type string. I then ...

RobKnight•2y ago

having a different amount of hooks will break react, it tracks the order the hooks were called to identity them- https://legacy.reactjs.org/docs/hooks-rules.html#:~:text=Only%20Call%20Hooks%20at%20the%20Top%20Level&text=Instead%2C%20always%20use%20Hooks%20at,each%20time%20a%20component%20renders. If you want to conditionally get data, call useQuery top level, and use the enabled property to control the request. Or you can use .refetch(), but this option will always cause a new request, even if your cache has data

Rules of Hooks – React

A JavaScript library for building user interfaces

w.ham•2y ago

i got it working sorry shouldve said

RobKnight•2y ago

But in your scenario, you should be using a mutation

w.ham•2y ago

yea that was issue

RobKnight•2y ago

yeah when interacting with ML model endpoints it feels like it should be using a query, but you definitely don't want background ML model runs lol

Gaming

Programming

How can I hit my trpc endpoint in a event handler?