How to properly type function arguments for procedures?
I'm using tRPC 10 with
trpc/react-query
I'm trying to understand how to create a function that receives a procedure and it's input as arguments, so that I can then use that procedure reference to call useQuery and getQueryKey within the function:
```...How Do I Ban Users & Invalidate Their JWT Tokens?
When a malicious user gets banned by an admin, I have to ensure he no longer can access protected routes, but that means I have to query the database every time checking a user's token, is there a more efficient method for invalidating tokens?
useQuery first refetch returns undefined
Hello.
So, I'm trying to get an item by ID when the user clicks a button. I've searched around and found a way to do it by using
useState() for the ID, setting useQuery's enabled to false, and refetch() whenever I need to get the item.
```ts
const [itemId, setItemId] = useState("");...Solution:
If you want to use the value imperatively you might want to use the vanilla client (via useUtils().client) or a mutation instead
❌ Failed to collect page data for api trpc [trpc] ❌
I'm getting this error when I deploy to Vercel
Framework: NEXTJS
Anyone resolved this issue 🤔, HELP PLEASE!!...
SSR with initialData throws error
I'm using SSR with Astro and have a client that looks like
```tsx
export type TfdExampleGreet = RouterOutput["tfdExample"]["greet"];
export type TfdExampleClientTrpcProps = {
readonly initialData?: TfdExampleGreet;...
How to cache trpc server request next.js app router
is it the right way
ctx.headers.set(
"Cache-Control",
"public, max-age=43200, stale-while-revalidate=120, immutable",...
The property '$request' in your router collides with a built-in method
Has anybody seen this error before? I cant make sense of it
Solution:
It was a bad import
Trpc calls being uncessarily made
Hi friends, i am relevatively new to TRPC so this could be somethign super basic. I have a component that is making a bunch of useQuery statements
```
export default function RegistryItem(props: IRegistryItemProps) {
const { data: session } = useSession();...
Get Name of All Query Routes or Mutation Routes
Typescript is pretty unhappy with my methods of doing this manually, so wondering if there are any official ways
although they i'm pretty sure they should work objectively i.e.
```ts
export type MutationRoutes = {...
Losing Types in VSCode
I'm encountering a curious issue with type inference in my project and wondering if anyone else has faced something similar or has insights to share.
When I open my project in VSCode, I lose type inference in frontend calls.
Interestingly, when I switch to WebStorm and open the same project, type inference works perfectly....
useUtils vs useQueryClient
I'm trying to use the
useUtils hook but I'm unsure if I'm doing it correctly? It doesn't seem to work but using useQueryClient does. Here is some code:
```typescript
const queryClient = useQueryClient();
const services = api.list.services({query: query});...Solution:
Make sure you only have 1 of each QueryClient and trpcClient client in your react tree, kind of sounds like useUtils is getting hooked up to the wrong client
Errors serialization
Are the errors now using the transformer serialize? or the errors simply go through errorsTransformer and that's it?
Build error with trpc-panel
Hi. I'm having a trouble building my tRPC api with trpc-panel.
I'm using yarn workspaces and trying to build my tRPC api but I'm running to the following error. Has anyone faced the same issue before?
```
>yarn trpc build...
Transferring huge buffer
I'm using tRPC with superjson serializer in an Electron app. I have a router querry that loads an png image, parses it with
sharp and sends it as a buffer to client to render inside canvas. For larger files (62MB) I'm getting a Invalid array length error from superjson though. Can you think of a way to work around this issue?Solution:
I've implemented it by returning the url to fetch from my mutation and added
``ts
protocol.handle('local-raw', request =>
net.fetch(file:///${request.url.slice('local-raw://'.length)}`)
);...Report progress of mutation
I'm using tRPC in a electron app and am running a nodeWorker from main thread. Is there a way to report partial progress to
useMutation in renderrer thread? I know I could use subscription but is this possible with mutation?Solution:
mutations typically follow the request/response pattern. A subscription is probably required.
Discriminated output based on discrimiated input
I have this function which works correctly by itself, but when i put it on trpc, the output doesn't get inffered correctly based o the input
```
type GetFarmsInput = {...
How to create a React Component that fetch API based on a router from props ?
I want to pass in my React component props the name of the router to use, here is my current implementation :
```tsx
export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
const router = useRouter()
...
How to pass through authentication header when using createTRPCProxyClient and RSC?
Hi - we are having a great time with tRPC, and have it working well in a Next14 + React Server Components environment.
However, we're seeing that the headers aren't being passed through when a trpc query call is made from within a RSC component via await trcp.profile.me.query()
I looked into trying to pass through the headers and there's no way to access the actual headers from the current request, only to add new ones via headers() function....
Integrating tRPC with Clerk Authentication in an Existing Next.js "Turborepo" Project
Hello,
I am currently working on a Next.js application within a Turborepo setup and am looking to integrate tRPC for efficient type-safe API calls. My project consists of multiple apps, including DOCS and WEB, and I aim to establish a shared authentication mechanism across these apps using Clerk authentication with tRPC. I have a couple of questions regarding this integration:
1. Documentation for tRPC Integration in Next.js Turborepo:
...
Help understanding how to deploy tRPC in monorepo.
Hi All,
I read in the FAQ that most benefits come from using tRPC in a monorepo. So if i want to build an app, that for example used tRPC with Fastify and a nextJS frontend. How exactly would this be deployed? Would it still work as expected if deploying the client and server separately to different ec2 instances for example. Am i right in thinking that the benefit comes with the type safety during development so how its deployed does not really matter?...