Async validation with useLazyQuery hook - apollo-client

Question

How to handle field level async validation in react-hook-form by using useLazyQury hook of Apollo Client?
As far I understand the useLazyQuery hook is the only way to initialize a GraphQL request on some action (like onClick). Unfortunately for me this hook returns void and forces me to use data variable to get value. But. The react-hook-form requires to return a true/false value in asyncValidation. How to handle such case?
const AsyncValidation = () => {
const [nicknameUniqueness, data ] = useLazyQuery(NICKNAME_UNIQUENESS_QUERY)
return (
<input
{...register('nickname', {
validate: {
asyncValidate: (value) => {
nicknameUniqueness({ variables: { nickname: value } }) // returns void by Apollo documentation
// How to get up-to-dated data here?
return data?.nicknameUniqueness.isUnique
}
}
})}
/>
)
}

Answer 1

I think you have to use useQuery here instead of useLazyQuery. You just have to set skip to true in your options object and then you can use refetch to lazy load/validate your nickname as refetch will return the ApolloQueryResult. One important thing is to use an async function here for your asyncValidate function so that you can await the result of that query call.
const AsyncValidation = () => {
const { refetch: nicknameUniqueness } = useQuery(NICKNAME_UNIQUENESS_QUERY, {
skip: true
});
return (
<input
{...register("nickname", {
validate: {
asyncValidate: async (value) => {
const { data } = await nicknameUniqueness({
variables: { nickname: value }
});
return data?.nicknameUniqueness.isUnique;
}
}
})}
/>
);
};
I made a small example to load data async using useQuery.