stop getOne api call on edit page

stop getOne api call on edit page antd

5 Replies

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To stop the getOne API call on the edit page in Ant Design with Refine, you can use the useForm hook with the action: "edit" property. By default, it uses the id from the route to fetch the record data with useOne and returns the queryResult for you to fill the form. However, you can change this behavior by using the setId function or id property. Here is an example of how to use useForm with action: "edit":

import React from "react";  
  
import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
}  
  
const PostEditPage: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Content"  
 name="content"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input.TextArea />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

import React from "react";  
  
import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
}  
  
const PostEditPage: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Content"  
 name="content"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input.TextArea />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

In this example, the useForm hook is used with the action: "edit" property. The formProps and saveButtonProps returned from the hook are used to create the form and save button respectively. For more details, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#action). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

fascinating-indigo•5mo ago

how to make the api call for edit ? @kapa.ai if i remove the id then how to make the api call for edit save

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to make an API call for saving the edited data without using the id from the route, you can use the useCustomMutation hook. This hook allows you to make custom API requests. Here is an example of how you can use useCustomMutation to make a POST request when the save button is clicked:

import { useForm, useCustomMutation } from "@pankod/refine";

const { formProps, saveButtonProps, onFinish } = useForm({
    resource: "users",
    id: "", // No id from the route
});

const { mutate } = useCustomMutation();

const handleOnFinish = (values) => {
    mutate({
        url: `${API_URL}/users/edit/:id`,
        method: "post",
        values
    });
};

return (
    <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
            <Form.Item label="Name" name="name">
                <Input />
            </Form.Item>
            <Form.Item label="Surname" name="surname">
                <Input />
            </Form.Item>
        </Form>
    </Edit>
);

import { useForm, useCustomMutation } from "@pankod/refine";

const { formProps, saveButtonProps, onFinish } = useForm({
    resource: "users",
    id: "", // No id from the route
});

const { mutate } = useCustomMutation();

const handleOnFinish = (values) => {
    mutate({
        url: `${API_URL}/users/edit/:id`,
        method: "post",
        values
    });
};

return (
    <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
            <Form.Item label="Name" name="name">
                <Input />
            </Form.Item>
            <Form.Item label="Surname" name="surname">
                <Input />
            </Form.Item>
        </Form>
    </Edit>
);

In this example, the useForm hook is used to create the form and save button. The useCustomMutation hook is used to make a POST request to the users/edit/:id endpoint when the form is submitted. The handleOnFinish function is passed to the onFinish prop of the form to handle the form submission. For more details, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/hooks/mutation/useCustomMutation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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