Beginner Client Problems
Node 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday.
I've got a zod validator create by drizzle-zod, for inserting into a table. There is a
.omit() call to remove fields not allowed to be set by my user. I'm using this in a publicProcedure as the argument to .input(TableValidator), and there's a .mutation() that inserts the data into the database.
I have also used a z.infer<typeof TableValidator> to get a type for this data, which I'm using on the client to coerce the single data structure I'm using as test data to that type, to use as an argument to the .useMutation() call....Solution:
Our docs also will have examples
How to deal with breaking backend version releases during active session?
What is the best practice to deal with errors that occur if the backend changes but the frontend bundle ist stale? We are using NextJS using SST with an AWS Lambda backend.
useMutation() runs 3 times
Hello,
I have this weird problem that all my mutations across the app runs 3 times I don't know why.
This is my API in the backend:...
How to protect against Cross Site Request Forgery (CSRF)
How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would include some kind of CSRF token automatically when submitting forms. Does this have to be done manually on tRPC?
tRPC doesn't explicitly check Content-Type
OWASP recommends explicitly checking the Content-Type header to be the expected one, but when I pass Content-Type: 'application/xml' to tRPC with JSON, it just parses it like it's JSON, instead of throwing a 400 or something. Is there a reason why this is done this way, and how can I change this behavior?
Create a typescript type that refers to a useQuery hook dynamically
I'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am trying to do
type CommonHookFn = (name:string)=>MyCustomType, except I need the equivalent of a useQuery hook where I can templatize the inputs/outputs).
From exploring the types under the hood of trpc, I think I need to use ProcedureUseQuery<TProcedure, TPath> to do this, but I can't figure out what I would put in to TProcesure/TPath to tell it that I'm looking for a Query with specific input/output types.. (e.g need a hook that takes a string as n input, and returns MyCustomType for its data)
Does anyone know how to create a type like this?...Solution:
I also have a post on this https://dev.to/nicklucas/trpc-patterns-router-factories-and-polymorphism-30b0
tRPC Options Method not Allow in Vercel Next.js
I've been getting this error and I have already added CORS in my projects, in initializing the router, the next.config.js, and etc, but still gives a lot of 405 METHOD NOT ALLOWED ERROR
Best way to update a TRPC useQuery response without refetching
Hey,
I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a user to review. I have a mutation which allows the user to delete a specific submission, which is working fine. However, I'm wondering what the best way of updating the submissions after I have just deleted the submission in question? I don't want to refetch the entire list of submissions as thats not very efficient, it would be best to just delete the specific submission from the submissions list if the delete mutation suceeded.
```ts...
What is a useSuspenseQuery?
Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhere?
https://trpc.io/docs/client/react/suspense...
No "mutation"-procedure on path
Hello all,
I am using the latest version of TRPC on my client and server. I am using React Query on my client and AWS Lambda on my server side.
When trying to perform a test mutation:...
How to access the query cache data?
I want to be able to use a data from already queried data as an initial data of another query. Is this possible somehow with trpc? I'm using react-query alongside the trpc
Thoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpc
I am prototyping an application using t3 app with trpc, connectkit web3 auth.
I am wanting to use nextjs middleware to protect routes server side.
As part of the connectkit auth flow, I have my application wrapped in a ClientProvider:...
onError callback type
I want to have a callback onError passed from parent component to the child which has mutation call. onError should be passed directly to the mutation options but also accept plan Error type and undefined. But I struggle how to type it correctly.
```ts
export const DownloadTrigger = ({...
Can I perform react query queries without using a trpc procedure, using useQuery standalone
Hey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regular useQuery method in my Next.js app ? Will the useQuery will be attached to the React Query context of TRPC ?
Test React component using trpc client and `useSuspenseQuery`
Hello !
I'm trying to test my React component that's querying through a tRPC client and
useSuspenseQuery.
I'm using Jest and I'm mocking the tPRC server with Mockttp.
...How to extract mutation type
Is it possible to extract mutation type?
I would like to pass a mutation trigger to the parent component but I dont know how I could extract the mutation type so typescript is happy
```ts...
Solution:
Thanks guys. Altough I cant seem to get it working with InferReactQueryOptions I managed to take te routerinputs and seems working like that
```ts
export type MutateTrigger = (
payload: RouterInputs['batch']['triggerDownload'],...
Mock form data middleware (
Hello everyone,
I'm using experimental_parseMultipartFormData on some of my procedures and i would like to know if some of you have found a nice way to mock the formData return from the middleware.
I think this can be achieved either by mocking the middleware function with a mocked FormData resolved value (but i dont think thats possible) or by transform formData into a request body that could be correctly parsed by the middleware which use '@web3-storage/multipart-parser'....
Ability to mutate/extend `input` from middlewares
Hi
I have a global middleware that should run for every route. This middleware simply coerces
'' (empty string) to undefined for the whole input object.
Here is my setup:
```js...Hot to redirect in middleware when using createCallerFactory
Hello.
I do have this tiny middleware:
```typescript
const authMiddleware = middleware(async (opts) => {
const result = await opts.next();...