rare-sapphire•2y ago

Using useRegister example, throws a type error.

I'm using the example provided that's listed under pages/customRegisterPage: https://refine.dev/docs/api-reference/core/hooks/authentication/useRegister/ I've removed any extra code that I added (just page styling) and used just the absolute basic example but I'm getting the following type error. Any idea what might be causing that?

Type '(values: RegisterVariables) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
  Types of parameters 'values' and 'event' are incompatible.
    Type 'FormEvent<HTMLFormElement>' is missing the following properties from type 'RegisterVariables': email, passwordts(2322)
index.d.ts(1412, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'

Type '(values: RegisterVariables) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
  Types of parameters 'values' and 'event' are incompatible.
    Type 'FormEvent<HTMLFormElement>' is missing the following properties from type 'RegisterVariables': email, passwordts(2322)
index.d.ts(1412, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'

useRegister | refine

useRegister data hook from refine is a modified version of react-query's useMutation for registration.

5 Replies

kapa.ai•2y ago

Hi @h3rrpie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're getting a type error because the onSubmit event handler expects a FormEvent instead of the RegisterVariables type. You can fix this by using the event.preventDefault() method and extracting the form values from the event target. Here's the updated onSubmit function:

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
  const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

  register({ email: email.value, password: password.value });
};

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
  const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

  register({ email: email.value, password: password.value });
};

And here's the updated RegisterPage component:

import { useRegister } from "@refinedev/core";

type RegisterVariables = {
  email: string;
  password: string;
};

export const RegisterPage = () => {
  const { mutate: register } = useRegister<RegisterVariables>();

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
    const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

    register({ email: email.value, password: password.value });
  };

  return (
    <form onSubmit={onSubmit}>
      <label>Email</label>
      <input name="email" value="test@refine.com" />
      <label>Password</label>
      <input name="password" value="refine" />
      <button type="submit">Submit</button>
    </form>
  );
};

import { useRegister } from "@refinedev/core";

type RegisterVariables = {
  email: string;
  password: string;
};

export const RegisterPage = () => {
  const { mutate: register } = useRegister<RegisterVariables>();

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
    const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

    register({ email: email.value, password: password.value });
  };

  return (
    <form onSubmit={onSubmit}>
      <label>Email</label>
      <input name="email" value="test@refine.com" />
      <label>Password</label>
      <input name="password" value="refine" />
      <button type="submit">Submit</button>
    </form>
  );
};

This should resolve the type error you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below

rare-sapphireOP•2y ago

Ok great, is there any specific reason why the example might be different from the docs?

wise-white•2y ago

it's a mistake 🤞🏻 we will fix our example code

rare-sapphireOP•2y ago

Sorry for the late response, and thanks for the update! Glad I wasn't missing something in particular myself. 🙂