How to Specify Type Parameters for useForm Hook to Separate Types for Form Structure and DataProvider Submission

[noritsune]

The Question

I want to specify a different type for the structure of the edit form and the data passed to the DataProvider when the form submitted. But I don't know how to do it.

Overview

I am using Refine to create a user information editing page. It is working fine, but I am having trouble specifying the type parameter for the useForm hook. If I can specify the type parameter as I ideally want, it would make development more comfortable and efficient.

Researched Findings

I've thoroughly read through the documentation for useForm and advanced tutorials, but I couldn't find an answer to this question.

Framework Structure

Routing: Next.js (App Router)
Data Provider: SimpleRest
UI: Material UI

The Flow of Data

Problematic Code

I think it's beneficial that the FormProps type specified as the third type parameter of useForm is used by the reset and handleSubmit functions. This is because they rely on the form structure.

However, the same type is also enforced for the argument of the onFinish function. This causes an issue when trying to convert the FormProps type to the User type inside the handleSubmitInner function during submission. It results in a type error.

"use client";

import { HttpError } from "@refinedev/core";
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect } from "react";

interface User {
  email: string;
  user_metadata: {
    display_name: string;
  };
}

interface FormProps {
  email: string;
  userName: string;
}

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

  const user = queryResult?.data?.data;

  // Called when the page is loaded
  useEffect(() => {
    // Map the user information received from the API to the form
    // Calling reset sets the values entered in the form all at once
    reset({
      email: user?.email,
      userName: user?.user_metadata?.display_name,
    });
  }, [reset, user]);

  // Called when submitting the form
  const handleSubmitInner = (formProps: FormProps) => {
    // Map the information entered in the form to the API
    onFinish({
      email: formProps.email,
      // A type error is output at this line.
      // This is because the argument type of the onFinish function becomes FormProps,
      // which is specified as the third type parameter of useForm.
      user_metadata: {
        display_name: formProps.userName,
      },
    });
  };

  return (
    <Edit
      saveButtonProps={{
        onClick: handleSubmit(handleSubmitInner),
      }}
    >
      {/* ... */}
    </Edit>
  );
}

If I don't specify types in the useForm function, this issue doesn't occur. However, that would negate the purpose of using TypeScript.

Ideal Code

The following code outputs a type error. This is because the argument type of the onFinish function becomes the type specified as the third parameter of useForm (FormProps). However, I am considering specifying the User type for the onFinish function's argument by adding another type parameter to useForm or by some other method. This type would be the type of data passed to the DataProvider when submitting.

"use client";

import { HttpError } from "@refinedev/core";
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { useEffect } from "react";

interface User {
  email: string;
  user_metadata: {
    display_name: string;
  };
}

interface FormProps {
  email: string;
  userName: string;
}

export default function UserEdit() {
  const {
    refineCore: { queryResult, onFinish },
    reset,
    handleSubmit,
    // The 4th type parameter is the type of the submission.
    // It will be a argument of onFinish, so it should be User.
  } = useForm<User, HttpError, FormProps, User>();

  const user = queryResult?.data?.data;

  // Called when the page is loaded
  useEffect(() => {
    // Map the user information received from the API to the form
    // Calling reset sets the values entered in the form all at once
    reset({
      email: user?.email,
      userName: user?.user_metadata?.display_name,
    });
  }, [reset, user]);

  // Called when submitting the form
  const handleSubmitInner = (formProps: FormProps) => {
    // Map the information entered in the form to the API
    onFinish({
      email: formProps.email,
      user_metadata: {
        display_name: formProps.userName,
      },
    });
  };

  return (
    <Edit
      saveButtonProps={{
        onClick: handleSubmit(handleSubmitInner),
      }}
    >
      {/* ... */}
    </Edit>
  );
}