tRPC

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

tRPC

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

4/3/2024

Error formatting with trpcExpress.createExpressMiddleware

I'm trying to figure out how to do error formatting but it's unclear how to do it in the context of trpcExpress.createExpressMiddleware - The documentation use trpcInit.context().create({ errorFormatter(opts) { ... }) which I'm not using as I'm following the React Query example from the docs. Is there a concrete example I can refer to where should I plug the errorFormatter(opts)?...

MadMax

4/1/2024

Tried to access "$types.prototype" which is not available at runtime

Im getting this weird errors every thing was good until I migrated to trpc 11 which for some reason worked but after some time getting this ...

Bean

4/1/2024

type safety with meta

how do I get the meta types to work correctly?

Max

4/1/2024

Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.

To show an examples of the many variants an implementations here is an example: In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using import { createTRPCNext } from '@trpc/next'; And this is for nextjs Page router.
In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using import { createTRPCReact } from "@trpc/react-query"; The T3-OS seems to be the closest to what I want, but they don't use clerk. And The repo the reference for clerk auth is out of date. ...

Solution:

@DiamondDragon @makistos @here 1. Sorry I didn’t see these notifications earlier! 2. Like 90% > are using NextJS (Page) & TRPC.
3. NextJs (App) & TRPC require a different configuration....

dany

3/31/2024

TypeError: cache is not a function

Trying to run vitest integration testing on a procedure but i keep running into errors with a "cache" function not existing I'm assuming this is a side effect since i call uncachedValidateRequest every time i create a TRPC context. portion of trpc.ts ```ts...

David

3/30/2024

Can't throw error

My request is pending although throw new TRPCError() executed. Something wrong here?

Vectorz

3/29/2024

How to use `getQueryKey` from the server side?

Hi guys, i cannot figure out how to use getQueryKey from the server side. Is this possible? The use case is i want to be able to set the query data from an RSC (server side) to arbitrary data. The SSRHelper .prefetch() function does not satisfy my needs, as i would like to set the query data to an arbitrary value from a query executed in the RSC code. Any help would be hugely appreciated!...

shikishikichangchang

3/29/2024

keep previous data

Trpc 11 (trpc@next) doesn’t have support for keepPreviousData? I’m trying to useQuery with keepPreviousData but can’t be used

kal

3/26/2024

Context with trpc ws client

Hello! I've implemented trpc to my nextjs 14 app router project, along with trpc socket subscriptions. I recently started making use of trpc context and implemented an asyncrhinous check to my session handler in order to append session information to my trpc context. This all works fine for the majority of my trpc functionality (non websocket stuff), however my clients are unable to establish a websocket connection to the server as every time the initial upgrade request is sent, the server 500 errors due to the added context initialisation. The error seems to be caused because some server component functionality ( cookies() ) is called during the call to fetch session information during context initialisation for the socket. Why does this cause an error when initliasing the trpc websocket client and not when making a standard trpc request? I should note that I followed this example to initialise my seperate websocket server. ( ws server is hosted on port 3001, main next app is on port 3000, could this possible be a cors issue?) https://github.com/trpc/examples-next-prisma-websockets-starter/blob/main/src/server/wssDevServer.ts...

Teodorant, Tech-Priest

3/26/2024

Cannot use usemutation in my nextjs/t3 project

I have this code

 const mutation = api.auth.addaccount.useMutation();
  const handleLogin = async (email: string, password: string) => {
    await mutation({ email: email, password: password });
  };

...

Jazon

3/26/2024

Has anyone passed supabase user to the tRPC context in Expo?

I am trying to pass the logged in user to the context of tRPC. To be able to use it in the routers and create a protected procedure. However, my application keeps on crashing as soon as I pass my user to the context (when a page is loaded where a call to the API is done). It looks like it has something to do with react-native-async-storage. Any ideas? ```...

Father Christmas

3/25/2024

Could we PLEASE get more docs on subscriptions / observables?

They sem to me extremely useful and important and there is just about no documentation on them at all. Not in jsdoc and the docs page is extremely short and there are almost no comments anywhere. So much of the rest of this wonderful library is extremely well documented - in particular when we can also use the TanStack Query docs but there is this one super useful part that is relegated to a Extra information Subscriptions / WebSockets section. Some more detailed explanations of how these thin...

Cylonik (Tom)

3/24/2024

Adding trpc.useQuery hook to Next.js page with react-hook-form prevents stateful refresh.

Hi, I'm new to tRPC so apologies if I've worded this poorly. I've got a page with a form managed by react-hook-query and Yup and SWR. I'm trying to migrate over to tRPC and Zod so I've been following the examples. I noticed that stateful refresh was no longer working once I'd added tRPC to the page - form details are no longer retained when making code changes. I found that by removing the following line it started working again. const hello = trpc.hello.useQuery({text: 'client'}); Why would this be happening and is there a workaround? ...

moustacheful

3/24/2024

React-query options not available in trpc/react-query?

I'm not sure if I'm misunderstanding something, but i'm trying to use the keepPreviousData option like this:

trpc.method.useQuery({ input: 'blah' }, { keepPreviousData: true })

trpc.method.useQuery({ input: 'blah' }, { keepPreviousData: true })

however, it seems like that option does not exist in the trpc react? it doesn't work nor it's suggested as a possible option. ...

BillyBob

3/24/2024

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

Good Morning I am getting the above error when updating to the latest version of NextJS - 14.1.1 through 14.1.4. The last release that doesn't cause this error is 14.1.0. I have: * ensured versions are the same on server and client. ...

Solution:

I solved it. This was due to having use server at the top of my server.ts file for interacting with tRPC on the server side. I replaced it with import server-only to discover this issue I followed the error to the code within node_modules

node_modules/.pnpm/@trpc+client@11.0.0-next.320_@trpc+server@11.0.0-next.320/node_modules/@trpc/client/dist/createTRPCClient.mjs

...

Rami

3/23/2024

Can I create custom terminating links?

There are cases where a user of my application is offline and can't have access to the server. I'd like to call certain functions that would properly handle that case. My best guess would be inside the Links. In that case can I create a terminating Link that would make that request return early without invoking the server? On a high level, what I'm trying to do is a local-first/offline-first application with tRPC...

Rami

3/23/2024

I want to use tRPC but I don't want a server

Can I have tRPC exclusively run on the client? I don't want to have any servers. The architecture and DX is just that good 😮‍💨...

BluePin

3/22/2024

“Integrating Drizzle Prepared Statements with tRPC Context”

I’m currently using tRPC and Drizzle for my project. In tRPC, we generally place the database driver in the context, which allows us to call this variable from within the context and create queries with Drizzle, among other ORMs. This is possible because the database is within the context. ```typescript export const createTRPCContext = async (opts: { headers: Headers }) => { return {...

IamIconLiving

3/22/2024

I have an actual data returned, but I get 404 spammed in the console

It's a bit weird, I have the data returned but I also get 404 at the same time. Here is usage on the frontend: ``` const { data, error } = api.profile.get.useQuery(); console.log("profile get error", error);...

IamIconLiving

3/22/2024

No "query"-procedure on path "auth.getProfile"

I am getting bunch of these errors and I can't figure this one out yet. I saw bunch of issues created related to this error but everyone seem to have magically resolved it on their side 😄 I am using tRPC in a conjunction with NextJS 14 based on Create t3 app. I think the issue has started after I introduced the translation of my website (i.e foo.com became foo.com/en or foo.com/fr), I wonder if it might be linked and if so, if I can resolve this by pointing to correct url or something? This seems like an error coming out from tRPC as I don't even get logs in my written query on server side. ...

Previous Next