correct way to call TRPC inside a function

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?

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

‘’’

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

How would you handle ‘isLoading’

Ill try this approach, thanks

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