Stack Overflow
Stack Overflow

Questions tagged [trpc.io]

Use this tag for tRPC, the TypeScript library for defining and using type-safe APIs for use with TypeScript servers and clients. For Remote Procedure Call, use [rpc] instead.

https://trpc.io/

https://trpc.io/docs

124 questions
10
votes
2 answers

Typescript, losing Zod and tRPC types across monorepo projects, types result in any

I am in a bit of a weird situation. For the past 2 weeks I've been trying to debug as to why I am losing types between my projects inside a monorepo. My backend exposes the types that my client uses, but for some reason, certain types just don't get…
Nikola-Milovic
  • 1,393
  • 1
  • 12
  • 35
9
votes
1 answer

Conditional keys based on value of another key with Zod

I'm making a project with the TMDB API and trying to make it super type-safe to reinforce some of the TypeScript stuff I'm learning. I'm using Zod to describe the shape of the data returned by the API. However, I've noticed that depending on the…
tinkoh
  • 366
  • 4
  • 10
7
votes
0 answers

tRPC AppRouter is defined as "any" on import with Turborepo

I am currently using a monorepo with Turborepo to store all my microservices code in a single repository, each with a package.json and a tsconfig.json, all of them written in nodejs. in each tsconfig.json, the config is identical { "extends":…
kennysliding
  • 2,783
  • 1
  • 10
  • 31
6
votes
3 answers

Cannot build my frontend app with tRPC on netlify

I am using React Typescript and I followed the tRPC docs for the server/client setup but I am getting this error. Does anyone know why this happens when deploying? It works fine when I am using it locally? 8:41:46 AM: TS2339: Property 'createClient'…
importTurtle
  • 138
  • 1
  • 9
6
votes
4 answers

TRPC: Property 'useInfiniteQuery' does not exist on type '{ useQuery:

TRPC Problem i have this tweetRouter with a timeline query, which returns tweets and a NextCursor, but when i try to access useInfiniteQuery in my components a error show up. ** Property 'useInfiniteQuery' does not exist on type '{ useQuery:…
ricardovac
  • 61
  • 1
  • 4
6
votes
2 answers

Testing a component in Next.js with testing-library that relies on tRCP

I was experimenting with tRCP and diligently followed the setup for my Next.js project described in the official docs over here: https://trpc.io/docs/nextjs However I noticed that a simple component that relies on tRPC such as this export const…
Christian Ivicevic
  • 10,071
  • 7
  • 39
  • 74
5
votes
1 answer

T3 App `❌ Invalid environment variables:`

I'm using the T3-app (nextjs, tRPC, etc), and I don't know if these env variable errors just happened, or if I haven't noticed them before. However, I have all of the environment variables set in the .env file and have the following configuration…
Ygbh
  • 143
  • 6
5
votes
2 answers

How to encode query param for a tRPC query using fetch

According to tRPCs documentation, the query params have to follow this format myQuery?input=${encodeURIComponent(JSON.stringify(input))} I have this procedure: hello: publicProcedure .input(z.object({ text: z.string() })) …
Michael Brenndoerfer
  • 3,483
  • 2
  • 39
  • 50
5
votes
2 answers

Don't get cookies in trpc context

So i have trpc set up with next.js and im trying to ssr where i fetch user before page load using trpc.useQuery hook, but i don't get the cookie with JWT token in trpc context i have this code in [username].tsx page: const UserPage: NextPage = () =>…
vasek
  • 96
  • 1
  • 6
4
votes
1 answer

tRPC stream API response from OpenAI to React client

I am currently working on a way to implement the openai-node package into my Next.js application. Because of the long generation times of OpenAI completions, I want to make use of streaming (which is normally not supported inside the package, see…
thim24
  • 624
  • 1
  • 5
  • 14
4
votes
1 answer

How to mock tRPC procedures with vitest and vitest-mock-extended on client side

I'm trying to mock tRPC procedures so I don't need to run the tRPC backend application to run frontend unit tests. I've tried to use vitest-mock-extended's mock and mockDeep functions. The trpc client still tries to make a request over the network,…
Ben Butterworth
  • 22,056
  • 10
  • 114
  • 167
4
votes
1 answer

How to make an API request with tRPC and NextJS without an invalid hook call error

I'm trying to send user input data to my tRPC API. When I try to send my query, I get an error that I can only use React Hooks inside a function component. I believe I can't call tRPC's useQuery from a callback because it's a react hook, but how can…
avenmia
  • 2,015
  • 4
  • 25
  • 49
4
votes
1 answer

Infer type from key of object inside an array Zod

So I'd like to grab the type from a key of an object within an array in Zod. That array is also nested within an object, just to make things extra difficult. This is an abstract view of the problem I'm having: const obj = z.object({ nestedArray:…
Herbie Vine
  • 1,643
  • 3
  • 17
  • 32
3
votes
2 answers

Why does interface lose its properties when one property is defined with index signatures?

Below is the example code of my issue. I'm using tRPC and Zod in the example. import { initTRPC, inferRouterOutputs } from '@trpc/server'; import { z } from "zod"; const t = initTRPC.create(); const { router, procedure } = t; interface ITest { …
SimHoZebs
  • 89
  • 1
  • 7
3
votes
2 answers

Can you intercept tRPC requests before or after the request is made and change the response data on the client?

I am trying to build an e-commerce demo site with Next.js 13 using the app directory and tRPC. I already made most of the admin dashboard and pretty much all of the core site functionality (cart, ordering, payments with stripe, order management on…
Meriegg
  • 107
  • 3
  • 8
1
2 3
…
8 9