useForm graphql variable number

excited-coffee · 2024-02-03T15:37:09.692Z

I'm tring to pass a float number to a create form, forced the type to be a number in the onFinish function in the useForm hook but i still get a graphql error that the number was passed as a string, which is true when i look at the request payload. How can i pass a numeric value to the useForm create?

K

kapa.ai•2/3/24, 3:37 PM

Hi @Emi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•2/3/24, 3:37 PM

----------------------
In the

useForm

useForm

hook, you can modify the form data before it is sent to the API using the

onFinish

onFinish

function. This function accepts an object with properties of each record on the API, to which you can pass custom values.

If you want to pass a numeric value, you can convert the string to a number using JavaScript's

parseFloat

parseFloat

parseFloat

parseFloat or

parseInt

parseInt

parseInt

parseInt function, depending on whether you want a floating point number or an integer.

Here is an example where we modify the form data before submit:

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

In this example,

stringValue

stringValue

stringValue

stringValue is the value you get from the form, and

numericValue

numericValue

numericValue

numericValue is the value you want to send to the API. The

parseFloat

parseFloat

parseFloat

parseFloat function converts the string to a floating point number.

Please replace

stringValue

stringValue

stringValue

stringValue and

numericValue

numericValue

numericValue

numericValue with the actual names you are using in your form and API.

For more information, you can refer to the refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•2/3/24, 3:37 PM

@268705889865695234 kapa.ai is still learning and improving, please let us know how it did by reacting below

E

excited-coffeeOP•2/3/24, 3:41 PM

@kapa.ai Forgot to mention i am using a Create and Form element form Antd. What would be the correct syntax?

K

kapa.ai•2/3/24, 3:41 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•2/3/24, 3:41 PM

----------------------
In the context of Ant Design's

Form

Form

Form

Form and

Create

Create

Create

Create components, you can use the

onFinish

onFinish

prop of the

Form

Form

Form

Form component to handle the form submission and convert the string to a number. Here's an example:

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

In this example,

onFinishHandler

onFinishHandler

onFinishHandler

onFinishHandler is a function that takes the form data, converts the price from a string to a number using

parseFloat

parseFloat

parseFloat

parseFloat, and then calls the original

onFinish

onFinish

function from

formProps

formProps

.

Please replace

IProduct

IProduct

IProduct

IProduct,

name

name

,

price

price

price

price, and

description

description

with the actual names you are using in your form and API.

For more information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•2/3/24, 3:41 PM

@268705889865695234 kapa.ai is still learning and improving, please let us know how it did by reacting below

E

excited-coffeeOP•2/3/24, 3:44 PM

This works great