4 replies

How to call tRPC on the client?

Hi,

I have a new t3 app set up, however I can't seem to figure out how to call tRPC functions on the client. The template from tRPC uses server rendering, however, I am using components from NextUI, which means that my app must be client-rendered. I want to get user login info, but that is not available on the client, so I made a tRPC procedure to pass down the user object.

Nowhere in the template can I find a way to call tRPC on the frontend. The T3 docs for tRPC references a utils folder with an api.ts folder present, however this doesn't exist for me. The closest I get is shared.ts, but that doesn't seem to do it.

What's the proper way to go about this? I'm really confused, and I've used tRPC before, but this is just completely different from what I'm used to. Would really appreciate the help, thanks!

Source code: https://github.com/syntheit/rookery

Tldr: I'm trying to call getUsers from NavbarRookery, but can't find the client connector.

GitHub

GitHub - syntheit/rookery: Rookery combines automated check-ins, re...

Rookery combines automated check-ins, real-time game updates, and player profiles to streamline chess tournament management for players and organizers - syntheit/rookery

Solution

in your client components you usually access your tRPC routers through the useQuery hook:

import { api } from "~/trpc/react";

function YourUserComp() {
const { data: user, isLoading } = api.users.getUser.useQuery()

...
}

import { api } from "~/trpc/react";

function YourUserComp() {
const { data: user, isLoading } = api.users.getUser.useQuery()

...
}

from here you can access the data once its loaded, loading states and errors. More info in the docs
https://trpc.io/docs/v10/client/react/useQuery

useQuery() | tRPC

The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.