how to specity types for post and also return data on useForm and useModalForm

const { formProps, saveButtonProps, onFinish } = useForm();

2 Replies

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To specify types for both the form data (POST) and return data when using useForm and useModalForm in refine, you can utilize generic type parameters. Here's how you can do it: For useForm:

const { formProps, saveButtonProps, onFinish } = useForm<TData, TError, TVariables>();

const { formProps, saveButtonProps, onFinish } = useForm<TData, TError, TVariables>();

For useModalForm:

const { formProps, saveButtonProps, onFinish } = useModalForm<TData, TError, TVariables>();

const { formProps, saveButtonProps, onFinish } = useModalForm<TData, TError, TVariables>();

Where: - TData: The type of data returned from the API - TError: The type of error returned from the API (usually HttpError) - TVariables: The type of data sent to the API (your form structure) Here's a more concrete example:

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserForm {
  name: string;
  email: string;
}

const { formProps, saveButtonProps, onFinish } = useForm<User, HttpError, UserForm>();

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserForm {
  name: string;
  email: string;
}

const { formProps, saveButtonProps, onFinish } = useForm<User, HttpError, UserForm>();

In this example, User is the type of data returned from the API, HttpError is the error type, and UserForm is the structure of your form data. The onFinish function will have the type:

(values: UserForm) => Promise<CreateResponse<User> | UpdateResponse<User> | void>

(values: UserForm) => Promise<CreateResponse<User> | UpdateResponse<User> | void>

This approach allows you to have type safety for both the form data you're submitting and the data you're receiving from the API. useForm API Reference (https://refine.dev/docs/packages/react-hook-form/use-form/#api) useModalForm Return Values (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#return-values-1) Remember that the exact implementation might vary slightly depending on your specific refine setup and version. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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