Open noritsune opened 4 months ago
Hey @noritsune thank you for the issue! I think I understand the problem here. While the useForm
hook from @refinedev/core
exposes an onFinish
handler to submit values and doesn't integrate with forms automatically, having a single generic TVariables
is enough but when we extend the useForm
with form libraries (such as react-hook-form
) it's understandable to require two generics, lets say TVariables
and TSubmission
, one is working with the form elements and other can be used to type onSubmit
function to make sure the specs are met.
The 4th generic can be the same with the 3rd by default and it will also only trigger errors if onSubmit
(or equivalent) is used manually. We can use type casting to prevent errors internally and assume users know what they're doing when they provide the 4th generic 🤔
Do I understand it correctly?
BTW, as a workaround I remember that one time I used a union type as 3rd that matches both the form and submission type and handled types in the custom onFinish
/handleSubmit
handler but having an option of a 4th generic looks better to me 😅
@aliemir Thank you for your response. I think your understanding is correct. Also, I've mostly grasped what you're saying. So, are you suggesting that useForm should allow specifying the type of the onFinish function's argument (i.e., the type of data sent to the DataProvider) as the 4th type option?
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
+1
It's really hard to use TS without proper typing in here. Also, thanks to @aliemir for the workaround.
I think it's better to use union type rather than "any"
Hopefully we can get an enhancement on this soon.
Is your feature request related to a problem? Please describe.
I'm developing a user information editing page using Refine, and I'm facing difficulties in clearly distinguishing between the form structure and the data type submitted to the DataProvider.
If you know of some way, please let me know.
Describe alternatives you've considered
If I don't specify types in the useForm function, this issue doesn't occur. However, that would negate the purpose of using TypeScript.
Additional context
Current Status and Investigation
I've extensively reviewed documentation and advanced tutorials on how to specify useForm's type parameters effectively, but haven't found a solution yet.
Context
Here is the project setup and code where I encountered the issue.
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 a type error when trying to convert the FormProps type to the User type inside the handleSubmitInner function during submission.
Describe the thing to improve
To resolve this issue, consider adding an additional type parameter like SubmissionData to useForm. This would clarify distinctions between form structure and submission data types, ensuring a smoother TypeScript-driven development process.