trpc hook pattern. This works, but I’m not convinced…
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}/>
‘’’
‘’’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}/>
‘’’
