tRPC

T

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

Join

Global context or shared context.

We are using react query and trpc and we ran into a undesired effect I hope someone could help me with. We have a monorepo with 20+ frontend applications (all in react/ts). Some of those apps/utilities export components that are used in other apps. Each utility/app has its own trpc server middleware for providing data to our components. Every app is wrapped in a trpc.provider and query Provider. So if we want to use a component from utility A requesting data from server A in app B we wrap that c...

Not sure how to troubleshoot `Failed to fetch at Function.from`

Am getting this on a trpc mutation in v.9 that is firing successfully then pushing me to the URL with the input params? Can add more details shortly. In Next + React

the tRPC loop or cycle

what is the full sequesnce of execution of trpc? where does it start when a user requests something and where does it end? i would like to remove services from IoC after execution is complete.

tRPC context and NextJS

Guys quick question about using trpc and nextjs. I'm using context with trpc to create some queries that will be only accessible by logged in users. On nextjs side I'm using react context to manage it for now. So my thinking was to pass one of the ctx variable that will be user ID to trpc server when I use useQuery. Ex) trpc.user.getSecret.useQuery(undefined, {req.body}). But I'm honestly stuck on how I can send next request body. Code for trpc context is this. ``` export const createContext = async (opts: CreateNextContextOptions) => {   // console.log(opts.req, "inside trpc context");   async function getUser() { ...

Is it possible to create a generic router to pass a type on?

Hi, I was wondering if it is possible to create a generic router to pass a type which is expected to return

Hardware IoT API

Maybe it's a wrong place to ask but out of curious: Does anyone have experience building API for hardware/IoT device to control and monitor them from frontend? How's the process? How long did it take? How's the investment come back?

Help to understand how and when to use tRPC in larger projects

Hi! I'm pretty sure the answer to my question is that tRPC is not suitable for this project, but anyway I would like a second though and perhaps also some inspiration to what kind of projects it is suitable for. I'm soon bootstrapping a project where I'll have multiple webapps (NextJS) and possibly iOS/Android (React Native) which consumes API(s) (Express/Fastify?) that talks to one or more databases (Prisma) and third party APIs. The API/functionality is fairly large, so it would make sense to not make a huge monolith but aim for something between microservice/macroservice architecture. The API also needs to be "public", so I've had a look at trpc-openapi....

Best practices on trpc and Sentry

We are currently migrating to trpc from Apollo server/graphql. We don't use next. What are the best practices for using error reporting tools like Sentry to get end to end (client to server) error handling or if that is challenging informative errors to sentry from trpc-server. Would love to hear your experiences. Thanks in advance.

How to do dependecy injection?

My routes are grouped by using the router object. i'd like to be able to inject a service to each route group. is this possible and how can i do this?...

input needs to be an object when doing a batch call?

Hey folks, just setup tRPC and running into the above error when trying to run mutations. Queries, even with inputs, work fine. Am I doing something wrong? ```ts // Router export default router({...

dynamic query and mutation

Hello. I have an edit form component like this: ```tsx const router = useRouter() const { t } = useTranslation(["admin/common"])...

A lot of WHY

Great post from @cje on Twitter but also got a lot of questions 1. If the data flow starts from server/api/routers/examples.ts , why is the create-t3-app documentation starts from pages/api/trpc/[trpc].ts? Is there specific reason for that? Or is it just a big massive loop that has no starts and ends? 2. When you say Next.js hands the request to tRPC, shouldn't it be from pages/[somepage]/*.tsx -> page/api/[someapi] ->server/trpc.ts -> server/trpc/*.tsor some server/db/*.ts? ...

It is possible to define a middleware for all routes?

Instead of creating a public/protected procedure and using it for every procedure I was wondering if TRPC has any option to define it in the route definition itself:

How are they defined separately?

I am using monorepo for my project design and I want to separate the definition of trpc completely independently. I have @app/api to take care of implementing the trpc api definitions in @app/api-define. I want to define all trpc api content ( type define ) in @app/api-define as a separate package....

how can i get procedure name?

is it possible to get procedure name? i would like to append a service to ctx based on procedure name? is this possible in trpc?

Right way to catch all unexpected errors before they reach the user

Hi, I was wondering, what's the right way to catch all unexpected errors (like db errors) and replace them with simple "Internal Server Error" erros, before they get to the user. Is it possible to achieve this via middleware?

tRPC sockets with react

Trying to make my React app work with socket with minimal server but getting error: "Uncaught TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null." at Object.useSubscription (createHooksInternal-9c1f8ad9.mjs:363:17) at createHooksInternal-9c1f8ad9.mjs:57:29...

Using `fetchRequestHandler` with other routes?

Hey everyone, I'm trying to use the fetchRequestHandler with a HatTip server, but all the examples seem to give tRPC entire control of all server responses. I actually want to serve other things besides tRPC routes. Anyone know how I could go about this? So far I've tried this, as well as changing the endpoint to "/" and "". Always the same result, 404s on /trpc ```...

Should useQueries be able to 'select' data?

Hi! I'm trying to use the newly implemented useQueries method to query for multiple items. I need to modify the result, so I'd like to use the select property. However, by doing so, my results aren't modified to the properties I've selected, it still just returns the whole object. Image #1 shows my select statement attempting to only grab the id and permissionId Image #2 shows the logged result in my browser displaying the full object....

Right way to structure your code when using tRPC?

I was wondering how you properly structure your tRPC ruter code? Writing all the code in the routers can become messy quickly. Do you split it up in controller and service files (MVC)?