Keep old data when changing trpc procedure inputs
Hi! I was wondering if anyone has a best practice for preventing a flash of no data when changing inputs for a certain trpc procedure using tanstack query. My usecase is a leaflet map where the data it fetches changes when changing the zoom or position of the map. But I still want to show the old data when I am panning the map for example.
I am currently using something like this where
navigate triggers new inputs for the query.
```...AI support
Hey, can I use TRPC with some AI stuff e.g. Vercel AI SDK? I want to stream returned data to the client.
Thanks in advance for any tips or tutorials!...
How to get a TRPCClientError shape as in initTRPC errorFormatter for testing
I want to test some UI logic handling errors from trpc but I struggle how to setup the error shape in the test so it triggers proper branches while test.
here is my initTrpc
```ts
const t = initTRPC.context<typeof createTRPCContext>().create({...
Solution:
OK nvm. Just found implementation of trpclienterror and you can do
```
new TRPCClientError('test3', {
result: { error: { data: { apiError: [] } } },...
Basic error handling patterns
Hello guys I am playing around with trpc and I don't know how to do error handling at a route level. I did read the docs about error handling but I don't know if my approach to this problem is good. How do you guys would handle errors in trpc ?
For example I have this sign up route. And the way I am doing error handling is by re throwing a TRPCError in the catch clause. Which doesn't seems right.
```ts...
Override output schema for certain mutations
Is it possible to overrider output schema's type for certain mutations?
Currently I have a base procedure that has an outputschema as such:
```...
How to handle TRPC error with tanstack/query in components
On the server I've got this fairly simple procedure
```typescript
getRooms: publicProcedure.query(() => {
throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });...
Migrating to v11 problem: 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions
Hello,
When I upgraded to v11, I got this error that I didn't know how to solve it.
...
Object literal may only specify known properties, and 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions<BuiltRouter<{ ctx: { req: fastify.FastifyRequest<fastify.RouteGenericInterface, fastify.RawServerDefault, IncomingMessage, fastify.FastifySchema, fastify.FastifyTypeProviderDefault, unknown, fastify.FastifyBaseLogger, fastify_types_type_provider.ResolveFastifyRequestType<fastify.FastifyTypePro...'.
Object literal may only specify known properties, and 'reactQueryContext' does not exist in type 'CreateTRPCReactOptions<BuiltRouter<{ ctx: { req: fastify.FastifyRequest<fastify.RouteGenericInterface, fastify.RawServerDefault, IncomingMessage, fastify.FastifySchema, fastify.FastifyTypeProviderDefault, unknown, fastify.FastifyBaseLogger, fastify_types_type_provider.ResolveFastifyRequestType<fastify.FastifyTypePro...'.
Following documentation gives error: "You cannot dot into a client module from a server component."
Running: Node
21.6.2, tRPC 11.0.0-rc.553 (client, server, next, react-query), next 14.2.14, and react-query 5.59.0
So, I'm trying to follow the React-Query Server Components setup guide in the tRPC docs, and I've mostly just copy pasted the code out, yet my client component isn't working.
This works: ```tsx...Solution:
ahh, finally found it. typo;
'use-client' rather than 'use client'.automatically add current path to the useQuery
Is there a way and how to add the current url(path) when call useQuery or useMutation, so that the current path is also being sent to the backend everytime. I think modify TRPCReactProvider might be useful, but that seem to be only evaluate once and not changing according to the page. My use case is that I'm doing /org/[orgname] and I want the orgname to be send to the backend everytime.
Error with AppRouter type mismatch in Deno
Hi everyone! I am trying to fix some type issues with a tRPC project. I am using Deno 2.0. The server and client are separate projects (but in a monorepo). The server is using the hono middleware to host the /trpc endpoint. The client is a vite react static site. I am using the react query integration.
Here is the weird part: Everything is actually fully functional. The vite frontend can tRPC query the backend perfectly fine. However the frontend is complaining about type mismatches. Not having working types kinda defeats the purpose of tRPC.
client/src/utils/api.ts...
Typing on trpc.createClient?
Basically I want an asyncQuery I can call later, the way asyncMutate works. I can do this:
```ts
const profileData = await trpcClient.query(
'seer.evolution.getProfile',
'name'...
generate types and publish them in a npm package
hey hey,
i am a trpc beginner.
i was able to get trpc running in a nx monorepo.
now i need to publish my trpc router types as a npm package, so that it can be installed and consumed via npm in another one of our projects....
withTRPC not working in RootLayout
I followed the T3 example to set up TRCP in my project https://create.t3.gg/en/examples. I am using the newer next file strucuture with the app folder, no pages folder, no _app file, but a root app/layout.tsx file. I want to use withTRCP on the export of the root layout. However I get the error:
Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component. Do I...Using superjson transformer makes data empty
Hi!
I've been developing using trpc for the past month or so. It's been a smooth sail so far. Suddenly now the
.data property on trpc queries are empty.
Checking the network tab the data is definitely there in the response, it's just undefined when accessing query.data. After some time debugging, I removed the superjson transformer from client & server, and now things are working again....Client unable to send requests on certain internet providers
Summary
Hi, we built a Expo React Native app with over 350k users with tRPC making calls to our backend edge functions hosted on Vercel's Next.js app.
The issue is that we don't receive the requests for a certain subset of our users in our production environment.
...
How to get mutation onError typescript type
I have two mutations on my frontend that should handle the response in the same way. So I extract the onError function so these two mutations can re-use the logic but I have a problem on how to type the error so the in function handling is pleased with typescript and the onError handler is also pleased.
```ts
// What type of the error should be here?
const onApiError = (error: ???) => {...}...
Server component (createHydrationHelpers) setup with external router
Hello!
Just wondering if anyone has followed the server component setup guide but with an external tRPC router? I'm unable to call
createCaller is the router is deployed externally.
https://trpc.io/docs/client/react/server-components...How to use client and react-query simultaneously?
I'm using this with nextjs app router and i want to have access to both
query and useQuery methods.all my inferred typings on the frontend are `any`
I have a backend trpc router like this:
```typescript
import likeRouter from './like';
import postRouter from './post';...