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'
subscriptions on edge
Trpc SSE subscriptions does not work on edge for me. Is there some specific config i need to implement?
I have followed the guide for subscriptions on trpc docs (https://trpc.io/docs/server/subscriptions)...
Turn off batching for some queries?
Hiya, I have a use case where I want to set headers on specific queries (specifically
cache-control private for authenticated data that's requested frequently by the client across page reloads) but because of batching, I'd need to make sure requests to these queries are never batched so the headers only refer to the one query at a time.
Are there any tricks for this? Or any better approaches for my use case?...Error: This is a client-only function.
It was working last week in
11.0.0-rc.660 but in 11.0.0-rc.682 it's not. I didn't change any code. I just rolled back and confirmed.
```ts
const createCaller = createCallerFactory(this.router);
const caller = createCaller(socket.ctx);...Disable explicit content-type checks
Hey, using TRPC v11 in a production ready system. We've got an external service that sends a notification to an exposed REST endpoint on our server, using trpc-to-openapi. However, the content-type is application/x-www-form-urlencoded and v11 does check for that. Is there any way to disable this check or allow specific content-types?