import { handleError } from 'utils';
import { accountApi } from 'resources/account';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
// Define your schema
const schema = z.object({
// Schema details here
});
// Infer type from schema
type SignUpParams = z.infer<typeof schema>;
const Page: NextPage = () => {
const { mutate: signUp, isLoading: isSignUpLoading } = accountApi.useSignUp();
const {
register,
handleSubmit,
setError,
formState: { errors },
} = useForm<SignUpParams>({
resolver: zodResolver(schema),
});
// Submit function
const onSubmit = (data: SignUpParams) => signUp(data, {
onSuccess: (data) => {
// Handle success response
queryClient.setQueryData(['account'], data);
},
onError: (e) => handleError(e, setError),
});
// Form rendering
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextInput
{...register('name')}
error={errors.name?.message}
/>
<Button
type="submit"
loading={isSignUpLoading}
>
Submit
</Button>
</form>
);
};