T

❓-help

correct way to call TRPC inside a function

TTCI

12/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?

TTCI

12/7/2022

UUUnknown User

12/7/2022

2 Messages Not Public

Sign In & Join Server To View

TTCI

12/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 User

12/11/2022

Message Not Public

Sign In & Join Server To View

TTCI

12/11/2022

This helped ill try some variation of this for my needs. thanks

Jjulius

12/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>
  );
};

TTCI

12/11/2022

How would you handle ‘isLoading’

Jjulius

12/11/2022

isLoading prop on the useMutation (updated code snippet)

TTCI

12/11/2022

Ill try this approach, thanks

Mmsalsbery

12/11/2022

You’ll find it much easier than fighting useQuery I reckon 😉

Looking for more? Join the community!

T

❓-help

T

❓-help

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 wou tRPC caching vs Vercel dynamic edge cachingWhat is the difference, or improvements, on Vercel's dynamic edge caching? tRPC server caching works Ignore Errors from batch callsI have some of my routers throw helpful errors for the client to use in the error message object, bu Any 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 cachin Prisma+TRPC monorepoHey, so we have a monorepo with 3 backend services and 3 frontend services. It looks like the follow calling 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. I TRPC 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 mak trpc 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 s Proxy 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 one Delay IsLoading....i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the dat Clearing 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 s TRPC 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/162cd9317c0e978 query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutation testing a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an obje CAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I co