Types issues upgrading to v11, `never` when using t.router
Hi, we have a mono repo project that we are trying to upgrade from v10.45.2 to v11(next). However, we are running into a weird types issue. This codebase was/is working completely fine with v10.45.2 but upgrading package versions seems to be causing types issues. Maybe we have missed something.
We have a base trpc defined in a shared package
trpc-shared.
```typescript...Trpc server actions
Are there any plans to bump server actions out from experimental?
I like trpc a lot. But server actions being 'experimental' is a little worrying.
Been looking at libraries like zsa and next-safe-action. Would like to stay
with trpc....
v11 incompatible with `@tanstack/react-query` > 5.59.9
My code, for example, works fine with v5.59.9:
```ts
const [greet] = trpc.tfdExample.greet.useSuspenseQuery(
"there tfdExample!",
{...
Dynamically generate url for httpBatchLink
Hey there 👋 is it possible to generate a url for httpBatchLink instead of hardcoding one? I attempted the below code, but this doesn't work. Understandably, the fallback value is used for
url each time the component mounts.
I believe that I wouldn't even need a useEffect if I wasn't using Next, as I could directly grab these values from window.location, but since I'm using SSR, this code doesn't make it through the SSR pass.
```TSX...onSuccess mutation not being called
Hey, I have this mutation which is called when I click a button. Inside the
onSuccess callback I show a toast to the user telling them that the request was successful. However, when I do a state change before I call the mutation, eg setRequests the onSuccess callback never runs, I know this because the console log never appears. But, when I remove the setRequests it does, there is no visible error in my console. Why does this happen? Is it by design?
```ts
export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
const clearMutation = api.generations.clear.useMutation();
const warnMutation = api.punishments.warn.useMutation();...Module "@trpc/server" has no exported member 'tracked'.
Hi everyone, i'm following the docs for Subscriptions, but am encountering the following error. What's wrong?
Solution:
i wasnt using @next
Re: relative imports to trpc.ts
For reference: https://github.com/trpc/trpc/pull/6112
@Nick Lucas
Let's assume for a second it were the case that it's something wrong with the setup.
How comes the type inference of
type AppRouter = typeof appRouter on the server side works as expected, regardless of relative / path alias import. But only upon client side import, the type isn't inferred properly anymore?...Solution:
I finally discovered the root cause.
It's a typescript issue. By implication you can call this a setup issue. I stay humbled @Nick Lucas 🙏
Basically, using tsconfig
paths within the child packages in monorepos is a bad idea :/
The server/user.router.ts will use the client/tsconfig.json#paths for module resolution during the import from client/index.ts (in contrast to imports from within server/)....Network tab returns array but data is undefined
I'm currently doing some testing with trpc + aws lambda. I have my network response returned with the actual array, but my
data property is undefined
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...