trpc hook pattern. This works, but I’m not convinced…

Question

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}/

‘’’

trpc hook pattern. This works, but I’m not convinced…

Looking for more? Join the community!