How can I have different types for when submitting and form for useForm

How can I have different types for when submitting and FormValue when using useForm with react-hook-form

2 Replies

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To have different types for form values and submission data when using useForm with react-hook-form in refine, you can utilize an additional type parameter in the useForm hook. This feature is currently being discussed as a potential improvement to the useForm hook. According to the GitHub issue discussing this feature (https://github.com/refinedev/refine/issues/6137), you can use the following approach:

const {
  refineCore: { queryResult, onFinish },
  reset,
  handleSubmit,
} = useForm<User, HttpError, FormProps, User>();

const {
  refineCore: { queryResult, onFinish },
  reset,
  handleSubmit,
} = useForm<User, HttpError, FormProps, User>();

In this example: - User is the type for the data returned by the API - HttpError is the error type - FormProps is the type for the form values - The second User is the type for the submission data This allows you to have different types for the form structure (FormProps) and the data submitted to the API (User). However, it's important to note that this feature is not yet officially implemented in refine. The refine team is considering adding this functionality to improve type safety and clarity when working with forms that have different structures for input and output. For now, as a workaround, you can use type casting in your submission handler to convert the form values to the required submission type. For example:

const handleSubmitInner = (formProps: FormProps) => {
  onFinish({
    email: formProps.email,
    user_metadata: {
      display_name: formProps.userName,
    },
  } as User);
};

const handleSubmitInner = (formProps: FormProps) => {
  onFinish({
    email: formProps.email,
    user_metadata: {
      display_name: formProps.userName,
    },
  } as User);
};

Keep in mind that this is a temporary solution until the feature is officially implemented. It's recommended to follow the GitHub issue (https://github.com/refinedev/refine/issues/6137) for updates on this feature's implementation. GitHub Issue: Improving Type Parameter Specification in useForm Hook (https://github.com/refinedev/refine/issues/6137) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How can I have different types for when submitting and form for useForm

Did you find this page helpful?