T
tRPC

❓-help

correct way to call TRPC inside a function

TTCI12/7/2022
i want a user to be able to sign after they have a clicked a button but i get a hooks error. can anyone help with this?
TTCI12/7/2022
UUUnknown User12/7/2022
2 Messages Not Public
Sign In & Join Server To View
TTCI12/11/2022
Thank you, i made use of the enabled property, and used refectch() in the component. I’m going to export it into. Custom hook and rejig it. This is the pattern I came up with. I want to call my route when a button is clicked and have access to isLoading, onError etc… I have implemented a pattern using ‘’refetch()’’ but it doesn’t feel ‘correct’ is there a better way of doing this. I will also create a custom hook out of it. ‘’’js const { refetch } = trpc.authDomain.signIn.useQuery( { email: userEmail }, { enabled: false, onError: (e: any) => { console.log('there was an error with the endpoint'); }, } ); async function isEmailVerified() { const response = await refetch(); const verification = response.data; // i want to access isLoading directly without writing many lines of new code which i would have to with this current approach if (verification?.status === 'tryAgain') { console.log('email not verified'); setHasInitiatedSignIn(true); } if (verification?.status === 'ok') { console.log('user can now verify code sent to their email address'); setHasInitiatedSignIn(true); } } Return <button onClick={isEmailVerified}/> ‘’’
UUUnknown User12/11/2022
Message Not Public
Sign In & Join Server To View
TTCI12/11/2022
This helped ill try some variation of this for my needs. thanks
Jjulius12/11/2022
to me signIn is a mutation - not a query.
const MySignInComp = () => {
const { mutate: signIn, isLoading: isSigningIn } = trpc.auth.signin.useMutation({
onSuccess() {
// do something on successful mutation
},
});

return (
<button onClick={signIn}>
{isSigningIn && <Spinner />}
Sign In
</button>
);
};
const MySignInComp = () => {
const { mutate: signIn, isLoading: isSigningIn } = trpc.auth.signin.useMutation({
onSuccess() {
// do something on successful mutation
},
});

return (
<button onClick={signIn}>
{isSigningIn && <Spinner />}
Sign In
</button>
);
};
TTCI12/11/2022
How would you handle ‘isLoading’
Jjulius12/11/2022
isLoading prop on the useMutation (updated code snippet)
TTCI12/11/2022
Ill try this approach, thanks
Mmsalsbery12/11/2022
You’ll find it much easier than fighting useQuery I reckon 😉

Looking for more? Join the community!

Recommended Posts
use tRPC for RPC calls instead of gRPCHi, I know that tRPC and gRPC are different things - despite the similar name. Nevertheless I woutRPC caching vs Vercel dynamic edge cachingWhat is the difference, or improvements, on Vercel's dynamic edge caching? tRPC server caching worksIgnore Errors from batch callsI have some of my routers throw helpful errors for the client to use in the error message object, buAny way to view headers in middleware?Middleware `input` doesn't seem to have it :/trying to cache api routesHello. I am using TRPC to make a site which integrates with a third party API. I need to add cachinPrisma+TRPC monorepoHey, so we have a monorepo with 3 backend services and 3 frontend services. It looks like the followcalling api endpoints from within a trpc api endpoint?Hey all. I have a series of api endpoints which may have to be reused across other api endpoints. ITRPC waiting until the query has completedHey. I've just found out about TRPC and I love it. However, I was wondering if there is a way to maktrpc with headless cmsHello, Is there any example with trpc and headless CMS or is there anypoint to use trpc for project Is it possible to call a query from another query defined in the same router?Say I have some code like the following: ``` t.router({ compute_all: t.procedure .query(Testing with React Testing LibraryHi! I am trying to test my ```DestinationForm``` component using react testing library. My test is sProxy TRPC server to another clientI've two TRPC servers, one essentially acts like a proxy, it validates auth and based on a specific Unexpected tokenhi, kindly help me on this oneDelay IsLoading....i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the datClearing CacheHow do I clear the queryCache for a particular query using the trpc context? If that's not possible,context at times emptyam new to trpc. i am usin iron-session with nextjs and its awesome. am forwarding the context. but sTRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)This is my wrapper reference from trpc: https://github.com/WeirdoGit/NewGitRepo/blob/162cd9317c0e978query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutationtesting a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an objeCAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I co