Call post.hello on button click

Hi, I know that trpc is using React useQuery under the hood in T3 on the client and therefore can only be used in a React component body. But, I am wondering if there is a way to modify the router call a trpc procedure on a button click in a client component.

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

I realize that I can make a fetch request to

http://localhost:3000/api/trpc/post.test

http://localhost:3000/api/trpc/post.test

http://localhost:3000/api/trpc/post.test

http://localhost:3000/api/trpc/post.test, but this defeats the point of TRPC.

Call post.hello on button click

Similar Threads

Similar Threads

Similar Threads