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

Mmightyboss

4/25/2023

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

Nnlucas

4/25/2023

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

GGoldHatCarls

4/25/2023

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.

Mmightyboss

4/26/2023

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.

Nnlucas

4/26/2023

Use components, put the query in a component which renders the extra stuff, then conditionally render the component. It will only query once rendered

Mmightyboss

4/26/2023

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

Looking for more? Join the community!

tRPC

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

Join Server

tRPC

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

Join Server

Recommended Posts

createTRPCNext type errorHi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouter Full cache invalidation and timing problemI'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invali Using Next.JS + FastifyMy node environment is Node 18, powered by PNPM. What's wrong: I have a few requirements for my app Error Handling vs Error FormattingI'm a bit confused from the docs about how I should be handling errors on the server. The Error Hand Next.js body-parsing issueA thead to discuss this issue: https://github.com/trpc/trpc/issues/4243 Cannot find module '@trpc/react-query/server' or its corresponding type declarations```ts import { createServerSideHelpers } from '@trpc/react-query/server' ``` This should work, righ Procedure with generic input?Is there a way to define a procedure so that it takes input with type parameters, and returns output Delete item {0: {json:{id: 12324}}}When i try to mutate/delete item with id i am geting this payload `{0: {json:{id: 12324}}}`, withou Query 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` - `/p convert 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 o ECONNREFUSED with TRPC call on VercelAnyone run into this before? I just deployed my app to Vercel and I run into this error when I trigg Invalid ValDoes TRPC string input have a limit? https://prnt.sc/KlXlyoGrzP8P Edit: It was actually from strip is 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 r using 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 p How 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 client How 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.svelt Can you get the queryClient without using a hook?Can you get the queryClient without using a hook?