Stuck trying to utilize useQuery to fetch some data on form submission

I'm trying to call a procedure in trpc through the use of useQuery in react upon form submission. So essentially I want to send the form data to the procedure then have it return some information. I'm not sure where to start on this. Does anyone have some guidance or a very basic example that could point me in the right direction? Im currently doing something similar with useMutation but in this case im actually changing data in the db. I can just utilize useMutation here to fetch the information I need, however this doesn't seem like its really the right way to approach this. Would love some insight on how to handle this properly. Thanks
N
Nick359d ago
to use a procedure imperatively using react-query you do want useMutation What's the exact use case? There are lots of ways you could go with this but it's hard to say without knowing the needs
G
GoldHatCarls359d ago
Is the issue you’re having with trpc Input or with prisma/Orm query? I did something similar to implement a filter functionality on my app. And while I initially thought the issue was trpc, I figured that it actually was my prisma where clause.
M
mightyboss358d ago
The use case is for fetching data from a db only after form submission. SO basically what im doing is: The user is shown a page with some data where a section of the data is encrypted on the server using a passphrase supplied by the user. Initially, the page displays a form to enter the passphrase, then once the user submits the form with the correct passphrase, the form is replaced with the now decrypted information. On the backend, the procedure querys the database to fetch the data then decrypts with the supplied password and returns the now decrypted data back to the client. Im currently using a mutation for this, however I dont think this is right because im not really adding or changing the data here, only reading it. I would think that I utilize useQuery for this, however I obviously dont want to fetch the data until the user has entered the correct password. It seems like this should be relatively straight forward, but im having a hard time finding information on this use case that I can really get a grasp from.
N
Nick358d ago
Use components, put the query in a component which renders the extra stuff, then conditionally render the component. It will only query once rendered
M
mightyboss358d ago
Sorry I prematurely sent the message before I was done explaining the scenario Ahh yes, that makes much more sense to me now Im not sure why I didnt think of that initially to be honest, thanks for the insight
More Posts
createTRPCNext type errorHi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouterFull cache invalidation and timing problemI'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invaliUsing Next.JS + FastifyMy node environment is Node 18, powered by PNPM. What's wrong: I have a few requirements for my appError Handling vs Error FormattingI'm a bit confused from the docs about how I should be handling errors on the server. The Error HandNext.js body-parsing issueA thead to discuss this issue: https://github.com/trpc/trpc/issues/4243Cannot find module '@trpc/react-query/server' or its corresponding type declarations```ts import { createServerSideHelpers } from '@trpc/react-query/server' ``` This should work, righProcedure with generic input?Is there a way to define a procedure so that it takes input with type parameters, and returns outputDelete item {0: {json:{id: 12324}}}When i try to mutate/delete item with id i am geting this payload `{0: {json:{id: 12324}}}`, withouQuery function depends on a variableIn tRPC v10 accessing a specific path is really easy, but because of that I don't control the query 'useInfiniteQuery' hook disappeared after moving to TurborepoI am using Turborepo with Next.js with the following layout, originally a T3 app - `/apps/app` - `/pconvert the result to date objectsI am not sure if this is even trpcs responsibility but I would like to get my date objects as date oECONNREFUSED with TRPC call on VercelAnyone run into this before? I just deployed my app to Vercel and I run into this error when I triggInvalid ValDoes TRPC string input have a limit? https://prnt.sc/KlXlyoGrzP8P Edit: It was actually from stripis possible to combine next-minimal-starter with react-router-dom ?Hi, I'm trying to combine https://github.com/trpc/trpc/tree/main/examples/next-minimal-starter and rusing same query for entries appHow to use same query for many components? I don't want to request api for many times ;-; I can't pHow can I make a direct fetch on a router endpoint from TRPC in NextJS on client?In the documentation you can use the vanilla TRPC client like this: ``` const bilbo = await clientHow to get unwrapped errors out of proxy clientI'm using sveltekit and in order to redirect from SSR you need to throw an error: https://kit.sveltCan you get the queryClient without using a hook?Can you get the queryClient without using a hook?