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?
![](https://utfs.io/f/f4f3cc1a-acea-4a3d-821f-6c469ed3fedd-nd6yul.29.02.png)
![](https://utfs.io/f/0cdfcd72-61e8-4b7b-b74c-8943366cdb26-nd6yul.30.38.png)
10 Replies
![](https://utfs.io/f/45487b54-c3a1-42c5-b607-16267996c2d1-nd6yul.32.39.png)
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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}/>
‘’’
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
This helped ill try some variation of this for my needs. thanks
to me
signIn
is a mutation - not a query. How would you handle ‘isLoading’
isLoading prop on the useMutation (updated code snippet)
Ill try this approach, thanks
You’ll find it much easier than fighting useQuery I reckon 😉