tRPC

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

tRPC

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

7/26/2024

How to check websocket is alive from client?

Hi, I am new to trpc, might I know how can I check the websocket connection is alive from client side? (I am doing node to node call) I tried to subscribe from the client and then close the server, but there is no error or something I can tell the user the connection is dead....

sbbu

7/26/2024

Call and await multiple mutations within one clientside procedure

hey all, does anyone know of a nice way to call & await multiple tRPC requests inside a procedure or within one mutation? reason being is i'm building a blockchain app, and we have to implement flows like this: ``` 1. trigger a mutation on our server, recieve back data for a blockchain transaction...

Solution:

looks like i can do this after all with the mutateAsync return type!

RubberDucker

7/26/2024

Attempted import error: 'hashQueryKey'

./node_modules/@trpc/react-query/dist/createHooksInternal-063195fc.mjs
Attempted import error: 'hashQueryKey' is not exported from '@tanstack/react-query' (imported as 'hashQueryKey').

./node_modules/@trpc/react-query/dist/createHooksInternal-063195fc.mjs
Attempted import error: 'hashQueryKey' is not exported from '@tanstack/react-query' (imported as 'hashQueryKey').

```json...

michaelschufi

7/25/2024

Is there a way to call procedures more directly without a router?

I read the blog post about server actions and wondered if there's a way to use a query or mutation more directly. Does it even make sense to use a procedure more directly? I was just wondering how to more closely colocate a procedures usage near a component. About 80% of the time only a single component will need a mutation (e.g. specific form or a certain data table with component specific data)....

klitchevo

7/25/2024

Issue creating server - v11

I have nest.js app and I am running tRPC inside of it, however when I want to instantiate router I get typescript errors: `private readonly trpc = initTRPC.context<ContextType>().create(); middleware = this.trpc.middleware; procedure = this.trpc.procedure;...

Bytes

7/24/2024

I can't read the value of the env variable, it returns undefined

I am building my application with nextjs using trpc and with drizzle+turso as the database, but when I perform a database query in the trpc route, the terminal reports an error and it seems to be unable to read the value in the env. The image shows my trpc route, drizzle and env files respectively

Luke

7/23/2024

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Hello all, I'm trying to get to the bottom of an issue I'm having using prefetching with HydrateClient. I'm using the t3 stack, so I believe that HydrateClient is a helper function wrapping tRPC helpers.dehydrate()... When I run this code with pnpm dev, it works fine, but when I go to pnpm build, I am getting ``` Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error...

Solution:

I FIXED IT! Stupid mistake, I wasn't marking the root page function that was performing the prefetch as async... i.e: Broken: ```ts export default function QueuePage() {...

scrubdaddy

7/20/2024

Compiling Frontend

In my frontend, I try to import the backend types: - import type { AppRouter } from "../../../lambda/api-handler/src"; however, now my frontend cannot build as it has a different typescript configuration than my backend. What is the intended solution here? Is it possible to import these types without using a single tsconfig/build step across backend and frontend?...

Bytes

7/20/2024

How do I return a plain text in trpc?

I want to return an ‘ok’ directly in the return data, not {result:{data: ‘xxx’}}

tltl

7/19/2024

is there a definitive solution to the slow language server/compilation issue?

it takes 5-20 seconds to load suggestions in many files in our project.

Catlike

7/19/2024

Pass query as prop with ProcedureUseQuery

I'm trying to pass a query to a component in my client using TypeScript, but ProcedureUseQuery seems to not be exported in @trp/react-query 11.0 (it is defined on src/createTRPCReact.tsx)

alan345

7/18/2024

How can I set a Cookie from the server (for the login)?

This code is not working.. ``` import { initTRPC } from "@trpc/server"; import { createHTTPServer } from "@trpc/server/adapters/standalone";...

alan345

7/18/2024

How to get access to the types generated by the server in the frontend (React)?

In this example, how do you replace data: any to the correct type? ``` import { trpc } from "../utils/trpc"; ...

scrubdaddy

7/17/2024

Types not being shared with the frontend

Hello, I am currently trying to follow a guide to setup a new project and encountering this error in the client: ``` Property 'greet' does not exist on type 'TRPCClient<CreateRouterInner<RootConfig<{ ctx: { event: APIGatewayProxyEvent; apiVersion: string; user: string | undefined; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'.ts(2339)...

Solution:

switching to createTRPCProxyClient solved this problem

Indigo

7/17/2024

How can you extract the mutation type signature?

Hi folks, this isn't a major issue and not blocking by any stretch. I was hoping to abstract my mutation callback so that I can keep my router relatively flat. ```...

BeastFox

7/17/2024

How to treat mongoose/mongodb ObjectIDs as their serialized string values on the frontend?

Node Environment Version: v20.10.0 Package Manager: PNPM Workspaces Repo Setup: Monorepo/Turborepo Environment: WSL with VSCode ...

gkline

7/16/2024

Union context type to allow incremental upgrade to App router

Hi there. We have a tRPC API that is currently being served from the NextJS Pages router. We're looking to migrate to the App router, and in the process I am being tasked with finding a way to reuse all of our existing routers/routes. I have the new app-router-router setup and serving requests, and now I'm trying to find a way to hook up to our existing routes. The issue is, the two context objects seem to be incompatible. One has the Pages router Req and Res properties, while the other just has the Req property. Otherwise, the types are exactly the same. I have handling so that all of our middleware works with either context type, yet defining base procedures results in a type error. Is there any way I can rectify this, so that for example, our teamProcedure would work on two different types of context? I've managed to figure everything else out, except for this. Thanks!...

João Bezerra

7/15/2024

Transform server response on the client before caching

How can I transform the server response on the client before putting it in the cache? Is it necessary to use a vanilla client or is there a way to do it while using the tanstack query integration?

Khaled Maher

7/14/2024

TypeError: Cannot read property 'useState' of null

I followed the documentation to use @trpc/client in react. I am using Expo React Native and Expo App Router here is the provider ```tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query";...

Solution:

Downgrade to latest versions not "next" versions. But mainly the mistake was that it is a monorepo so the packages were being installed twice .. once in the package folder and one in the root and I was mixing things up

Peps

7/14/2024

Procedure shows as `any` unless it's a mutation

Hey 👋 I'm trying to create a small monorepo FE/BE project in which I'm trying tRPC for the first time as it looks like a really cool way of building and consuming APIs. To give a bit of context, I got a separate API server using Hono, and a fresh create-next-app in which I initialised tRPC....