react-query no cookies on initial load
Using react-query client on a page that uses router server caller, when initially loading that page, react-query client does not pass cookies through.
Here is a minimal reproduction repo, created with create-t3-app: https://github.com/Shmookoff/trpc-react-query-no-cookies-on-initial-load
1. Cookie test is set in the middleware.
2. The / page is invoking a procedure using server caller....Brainstorming how to convert REST api to tRPC
I have a use case where I have a url that looks similar to
/stores/:store/items/:items and store could have many sub routes to it. is there any ideas on the best way to convert this into a tRPC route?Solution:
create a stores router with different procedures, items being one of them, and then pass :store and :item as fields on your input object, so something like:
```ts
// ...
.input(z.object({ storeId: z.string(), itemId: z.string() }))...
rate limiting with @fastify/rate-limit
node 20.13.0
pnpm
@fastify/rate-limit ^9.1.0
fastify ^4.27.0
@trpc/server 11.0.0-rc.401...
Shopping cart + TRPC
What is the best practice for me to add a "cartId" cookie when performing a "cart.addItem" mutation?
This cookie would store the order ID in the database.
How can I be doing this?
I'm using Next.js but I believe I will move tRPC to a separately hosted API on an Express/Fastify server...
createTRPCReact cannot be named without a reference to x
Hey, I have a monorepo where I have a separate package for trpc (@repo/api) which I'm trying to use on the frontend.
When trying to create
createTRPCReact I'm getting the following type error
```ts
The inferred type of 'trpcReact' cannot be named without a reference to '../../node_modules/@repo/api/dist/router/post'. This is likely not portable. A type annotation is necessary....How do I use the rsc-rq-prefetch example with a protected procedure?
Thank you for this implementation! It looks sooo promising 😀
However, I ran into an issue when trying it out:
https://github.com/trpc/trpc/blob/next/examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/page.tsx...
how to handle or hydrate error throwed in prefetch with streaming?
i tried next-app-dir / rsc-rq-prefetch example, but there have only success case, not failed.
if i throw error in prefetch request, next js redirect me error.tsx is there way to send error to rq with streaming?...
Procedure passed as argument to function loses type safety.
Hi there, I have a mystifying TS issue, where I lose type safety of my proc when I pass it as an argument to another function. I'm new to tRPC, and been doing a spike to see if we can adopt it at our company.
Full code example is in this TS playground: https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAb2AO2DAKgJQAoGEA0cWeAolFNIQILICe2FAxgKYAmArlMwL5wBmFEHABEAARhQwjAPQBnZlABuC4QChQkWHABUcAIay4ALwit+gkSdbCA3KtWMIyWfHgBeOCjTFcAOkfIMMwAHjAAPAhw7PJQAFyIcBQANsyy8S5QKADmANoAunC8AD5RyKzMfChshQB8ABQAlP5cekGNdqohmvABLokQ7EFQcB4wvhSDCnZd0D1OfWDsAEZJwIwMECwcXCNwY2BMbJzMHTC0YMxwG4y7mMwwnMjo58xhZxcQfHCLK2vXR1xfChFjAah0Zlpej0WkEfCQypAUO44GF0HAQkEyoZrvUDpt4uhCAB9CBgGDAebxBDcBojGqIVRwRL3R7fJi+aLMOp1UkwWS0tz03myXzIDF1SKMGDBKn8CAQeIAcj48sVhRpDVU3HBwW6cChcFWfQ8jBhzDhCIgSLqjO+y1W60O22YQOQILqVl8ECWACtmFKJYbQGh4p7kOwQEsFI0vWSKcg9ElGoUGg18LbqaomgBHdgKWjc4UC+kIW3SaTo3X++CrEBoPYQOBRvYvMyOcjVmx7AAWwEMsm7AySZmbemQ6PI0Cb-r0nKDdfgfbgAANw5GFHASuwyhUqqxl2WKygXMw9KxCGhFYZGJwuIEkrQV2PaAemeW4OJZABaLrVn+TqBbQNIlZAARnSCRsl2YVXRBAB+XxazQOwmWA2QACYIMyZAsmgskRSlYJfBVCAUOZB4oHHfItQaOwgA
The issue is that with the definition of
createTRPCEndpoint, the returned procedure loses the type definition of input....Error "Subscriptions should use wsLink"
I have made a stackoverflow post, hoping if I can get some help!
https://stackoverflow.com/questions/78653455/error-subscriptions-should-use-wslink-using-trpc...
Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?
From https://trpc.io/docs/client/react/setup:```ts
function App() {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({ ... }),...
How are errors handled in batched requests
We're using httpBatchLink, and have noticed that when multiple procedures calls are batched together and one fails, the other procedure calls don't appear to even be attempted (at least according to our otel instrumentation). Is that the way batched procedure calls are expected to behave?
File upload with formdata
I'm trying to upload a pdf file to R2 and save metadata to my postgres database (both through a trpc procedure).
I followed the example in https://github.com/trpc/trpc/tree/next/examples/next-formdata but I get the error copied below. I have been stuck on this for hours and don't know what I'm doing wrong.
Envrionment: Next.js 14.2.4 / pnpm ...
Solution:
I couldnt make it work either, my solution was to (exceptionally) do everything in a server action. This allowed me to send a formData object to the action that runs in my server and then use trpc server from within the action to uipdate the entity's URL (I'm assuming u'll need to store the url somewhere afterwards). Hope this helps
Zod formatting Error
I'm using Zod for validation and whenever I get a validation error I'd like to be able to get the error message properly formatted. In the docs there's a section for this where it's sepcified that we can use the errorFormatter to achieve this. However, it's not doing anything at all. Btw, if I add a console.log within the errorFormatter nothing's being shown in the console, which is kind of weird if you ask me. However superjson is working completely fine, so I dont think its a configuration problem....
Here's my code
```...
When a procedure returns an instance of a class, the superjson isApplicable doesnt detect it
When a procedure returns an instance of a class, the superjson isApplicable doesnt detect it as that class, but when you return it inside an object or array, it does.
```ts
// ❌
class Test {
a: string;...
Validating inputs and outputs only via typescript
Hey everyone,
I am trying to create an appRouter with
ts-morph but I am having trouble with passing the zod schema/object instance to it (since I need to pass the original implementation, not the instance).
I was thinking about a way to work around this and was wondering if I could somehow just pass the zod typescript type in the inputs and outputs - keep in mind that my usecase only calls for the type definitions to work, not the actual implementation.
```ts...Zod error not being formatted
I'm using Zod for validation and whenever I get a validation error I'd like to be able to get the error message properly formatted. In the docs there's a section for this where it's sepcified that we can use the errorFormatter to achieve this. However, it's not doing anything at all. Btw, if I add a console.log within the errorFormatter nothing's being shown in the console, which is kind of weird if you ask me. However superjson is working completely fine, so I dont think its a configuration problem....
Here's my code
```...
AppRouter type is imported as any
I have a monorepo and everything else from the server is imported correctly except for this specific type. Aliases do not work, importing directly from the file does not work. Any hints? I do not want to use project references.
v10 useQueries does not return a stable reference
I though this code would work downstream for memos and callbacks, but it does not. The memo and effect are re-ran every render.
Have I don't something stupid, here or is this intended? How would I memoize a derives values from the results?
This code:...
strange behaviour with t3 trpc starter
I had copied the provided create-post component and created a duplicate create-video component, exact same just different db table.
https://github.com/rverma-dev/t3-app-bug/commit/d08f1ca79e3dcbba6033b477308a14b7ee530536. However the page gets rendered and immediately it error out Error: ❌ Attempted to access a server-side environment variable on the client.
Kind of looking at it for last 4-5 hours but no luck at all. The code is exact same as of create-post but don't work....