How to make prefetching/RSC suspense work with auth?
Hi đź‘‹
I'm using the rsc-rq-prefetch pattern in my project. It worked quite well - up until I added auth to my tRPC procedures.
During SSR a server error gets thrown because the useSuspenseQuery request fails (there's no auth because SSR does not use the request's context/headers https://github.com/vercel/next.js/discussions/60640)....
@trpc/client vanilla client not appending formdata data to the request/payload
server end works fine as i tested it with curl and everything went smoothly but when using @trpc/client package to make vanilla client and then doing a mutation like this
```js
const fd = new FormData();
fd.set('image', form.image, form.image.name);
await api.upload.mutate(fd);...
Solution:
okay i figured it out the problem is
httpBatchLink switching to httpLink works all fine.Route not found when using Fastify adapter
I'm currently running into the following error when attempting to issue a request to my server which is leveraging Fastify:
```
[19:04:02.888] INFO (57024): Route POST:/associateSocialMediaAccount not found
reqId: "req-1"
[19:04:02.892] INFO (57024): request completed...
Solution:
The client side
url was missing the /trpc prefix set in the server.Modifying input in a middleware
Is it possible to modify input somewhere so that I can do something like this
```ts
const signIn = deskOrAdminProcedure
.input(
z.object({...
Solution:
How do *you* structure the tRPC router when dealing with isolated components?
Hi đź‘‹
I'm wondering how other people handle their tRPC router for cases where a component deep in the Next.js file tree (e.g.
/[locale]/(dashboard)/categories/posts/comments/list-component/my-procedure.ts ) has a procedure.
Everything inside the folder /[locale]/(dashboard)/categories/posts/comments/list-component is a single react component (tree). I.e. I don't share this component anywhere else. But it still has a query procedure to fetch the data we need for it. ...Can we bundle WS TRPC Server?
I'm trying to bundle just the file using esbuild, I just want to make a docker image that weights less through build and using an alpine image.
The problem is that the output image of just installing and using ts-node fileserver is quite big....
Solution:
Nevermind, this is an stupid question, of course you can
How to handle consistency for client-side only APIs?
Hi, we are using tRPC as a BFF (Backend for Frontend) which act as a proxy between ou UI and our dozen of backend services.
What's the recommended approach to handle direct client-side API calls when they cannot be implemented with tRPC due to legacy limitations?
Should we use React Query directly, or is there a way to extend tRPC's router in the client-side to maintain consistent API handling?
PS: For better understanding, we'd like to add client-side procedures because we need to calls APIs that can only be called in a browser...
Solution:
```ts
export function buildTrpcClientFromRouter<AppRouter extends AnyRouter>(router: AppRouter) {
function mockLink<TRouter extends AnyRouter>(): TRPCLink<TRouter> {
return () => {...
Does server side helper's fetch also fill the cache like prefetch?
It wasn't clear in the docs (https://trpc.io/docs/client/nextjs/server-side-helpers#helpers-usage) , but does
fetch also add the query to the cache, which I then dehydrate and send to the client?
I need to access data both server side and client side...SSR with NextJs app directory
Hey all, wondering if anyone has gotten SSR to work with TRPC/nextjs app directory. I'm using the trpcreactprovider.
Cannot read __untypedClient from undefined error when try to update to latest 11.rc### versions
We are using TRPC with react and we got everything running with the latest versions from tanstack/react-query, but every time I try to update our trpc packages:
"@trpc/client": "11.0.0-rc.660",
"@trpc/react-query": "11.0.0-rc.660",
"@trpc/server": "11.0.0-rc.660",
To their latest builds we get an uncaught exception on the trpc.Provider component that it cannot read __untypedClient from undefined. I have tried to Google and check GitHub issues if someone faced the same or not, but to no avail. Is there someone out there who could point me some things to fix, check or otherwise to get me unstuck from the 660 builds?...
Nextjs App Router example repo doesn't match NextJS App Router Docs
#âť“-help
The official documentation on how to use NextJSs App Router at:
https://trpc.io/docs/client/react/server-components...
Problem using EventEmitters [Weird behavior]
I'm trying to implement a simple notification in a webapp, I can't make it work with EventEmmiters
```js
streamNotifications: publicProcedure.subscription(async function* (opts) {
try {...
Solution:
I use redis for my project https://github.com/bebore/ei-noah-bot but that's quite complex, I recommend just following the redis package docs. It's not much different from the event emitter other than that you need to (de)serialize the input and output.
Migrating to use Superjson
I currently have a tRPC router that is being used by a web app & React native client. My current version does not use superjson. I want to start using superjson as my transformer. Is there an easy way for me to make this migration?
When I tried just starting to use Superjson, our React native client started running into errors because the old mobile client was not using superjson but the server was. I wish I could access context in my transformer so I could choose to only do the transformation for new clients. Any other ideas on how I can make the switch-over while maintaining backwards compatibility for older clients?...
Type safe errors?
Hi, it's there a way to make something like this in Trpc?
```typescript
import { useQuery } from "@tanstack/react-query"
import type { InferResponseType } from "hono"
...
Can I get a mutations input type form my client?
Hey friends, I'm working on an angular app with tanstack query and trpc. I'm trying to solve duplication and have one central repository (service) of query options. For this I am using a service and it would be amazing to get the input type for my procedures.
```ts
@Injectable({
providedIn: 'root',
})...
Output typings in Monorepo always resolve to any
I’m using a monorepo and pnpm workspaces to import my router into the FE code. However the typings for the output will always resolve to any - the inputs will resolve find but the outputs (schema or no schema) won’t. I’ve followed the advice on the documentation, any suggestions?
Image upload using TRPC
Do wehave any examples to upload image to s3 and store the url in out db using trpc.
I'm using nextjs with trpc server....
I'd love to brainstorm about #5580
I just personally ran into the issue described here(https://github.com/trpc/trpc/issues/5580) and would love to see if anyone has any ideas on potential solutions.
My app size is large enough now that I need to have
disableSourceOfProjectReferenceRedirect enabled, which leads to the behavior described in that post, with Go-To-Definition completely broken, even with type source maps available....can't create context when using nextjs app dir
Im trying to use the latest version of nextjs and make use of the app directory. when trying to make a create context function like they show in the docs here: https://trpc.io/docs/server/context , it gives the following error when i try to create the handler on the frontend
...
Types of parameters 'opts' and 'opts' are incompatible.
Property 'res' is missing in type 'FetchCreateContextFnOptions' but required in type 'CreateNextContextOptions'
Types of parameters 'opts' and 'opts' are incompatible.
Property 'res' is missing in type 'FetchCreateContextFnOptions' but required in type 'CreateNextContextOptions'
