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
5 Replies
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
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.
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.
Use components, put the query in a component which renders the extra stuff, then conditionally render the component. It will only query once rendered
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