Clone record

What kind of settings are need for the clone button to work in list view? I'm using antd.

20 Replies

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up a clone button in a list view using Ant Design (antd) with refine, you need to follow these steps: 1. Import Necessary Components and Hooks: Import List, useTable, and CloneButton from @refinedev/antd, and Table from antd. 2. Define the List Component: Create a list component that uses useTable to fetch and display data in a table format. 3. Add the Clone Button: Add the CloneButton to the actions column of the table. Ensure you pass the recordItemId to the CloneButton to specify which record to clone. Here is a complete example based on the provided knowledge sources:

import {  
  List,  
  useTable,  
  CloneButton,  
} from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost>();  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column dataIndex="title" title="Title" width="100%" />  
        <Table.Column<IPost>  
          title="Actions"  
          dataIndex="actions"  
          key="actions"  
          render={(_, record) => (  
            <CloneButton size="small" recordItemId={record.id} />  
          )}  
        />  
      </Table>  
    </List>  
  );  
};  
  
interface IPost {  
  id: number;  
  title: string;  
}

import {  
  List,  
  useTable,  
  CloneButton,  
} from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost>();  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column dataIndex="title" title="Title" width="100%" />  
        <Table.Column<IPost>  
          title="Actions"  
          dataIndex="actions"  
          key="actions"  
          render={(_, record) => (  
            <CloneButton size="small" recordItemId={record.id} />  
          )}  
        />  
      </Table>  
    </List>  
  );  
};  
  
interface IPost {  
  id: number;  
  title: string;  
}

Additional Settings - Record Item ID: Ensure that the recordItemId is correctly passed to the CloneButton. This ID is used to append the record ID to the end of the route path. Learn more (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/clone-button/#recorditemid). - Resource: If you need to specify a different resource, you can use the resource prop. By default, it redirects to the inferred resource's clone action path. Learn more (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/clone-button/#resource). - Access Control: If you have access control requirements, you can use the accessControl prop to enable or disable the button based on user permissions. Learn more (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/clone-button/#accesscontrol). Example with Modal Form If you want to open the clone form in a modal, you can use the useModalForm hook: ```jsx import React from "react";
import { CloneButton, List, useModalForm, useTable } from "@refinedev/antd";
import { Form, Input, Modal, Space, Table } from "antd";

const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();

const {
modalProps: cloneModalProps,
formProps: cloneFormProps,
show: cloneModalShow,
} = useModalForm<IPost>({
action: "clone",
});

return (
<>
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex=" ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai what about in resources? how do I specifiy the action path for clone action?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To specify the action path for the clone action in your resources, you need to define the clone property in your resource configuration. This property should point to the component that handles the clone action. Here is an example of how to set up the resource configuration for the clone action:

import { Refine } from "@refinedev/core";
import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd";
import { dataProvider } from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { PostList, PostCreate, PostEdit, PostShow, PostClone } from "./pages/posts";
const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                notificationProvider={notificationProvider}
                Layout={AntdLayout}
                ReadyPage={ReadyPage}
                catchAll={<ErrorComponent />}
                resources={[
                    {
                        name: "posts",
                        list: PostList,
                        create: PostCreate,
                        edit: PostEdit,
                        show: PostShow,
                        clone: PostClone, // Specify the clone component here
                    },
                ]}
            >
                <Routes>
                    <Route path="/" element={<Outlet />}>
                        <Route index element={<PostList />} />
                        <Route path="posts">
                            <Route index element={<PostList />} />
                            <Route path="create" element={<PostCreate />} />
                            <Route path="edit/:id" element={<PostEdit />} />
                            <Route path="show/:id" element={<PostShow />} />
                            <Route path="clone/:id" element={<PostClone />} /> {/* Define the clone route */}
                        </Route>
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

import { Refine } from "@refinedev/core";
import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd";
import { dataProvider } from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { PostList, PostCreate, PostEdit, PostShow, PostClone } from "./pages/posts";
const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                notificationProvider={notificationProvider}
                Layout={AntdLayout}
                ReadyPage={ReadyPage}
                catchAll={<ErrorComponent />}
                resources={[
                    {
                        name: "posts",
                        list: PostList,
                        create: PostCreate,
                        edit: PostEdit,
                        show: PostShow,
                        clone: PostClone, // Specify the clone component here
                    },
                ]}
            >
                <Routes>
                    <Route path="/" element={<Outlet />}>
                        <Route index element={<PostList />} />
                        <Route path="posts">
                            <Route index element={<PostList />} />
                            <Route path="create" element={<PostCreate />} />
                            <Route path="edit/:id" element={<PostEdit />} />
                            <Route path="show/:id" element={<PostShow />} />
                            <Route path="clone/:id" element={<PostClone />} /> {/* Define the clone route */}
                        </Route>
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

Key Points 1. Define the Clone Component: Ensure you have a component that handles the clone action, e.g., PostClone. 2. Add the Clone Property in Resources: In the resources array, add the clone property and point it to your clone component. 3. Define the Clone Route: In your routing configuration, add a route for the clone action, e.g., <Route path="clone/:id" element={<PostClone />} />. Example Clone Component Here is a simple example of what the PostClone component might look like:

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const PostClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <Form {...formProps} layout="vertical">
            <Form.Item label="Title" name="title">
                <Input />
            </Form.Item>
            <Form.Item label="Content" name="content">
                <Input.TextArea rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default PostClone;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const PostClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <Form {...formProps} layout="vertical">
            <Form.Item label="Title" name="title">
                <Input />
            </Form.Item>
            <Form.Item label="Content" name="content">
                <Input.TextArea rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default PostClone;

By following these steps, you can ensure that the clone action is properly configured and accessible in your application. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/core/refine-component/#identifier). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai my resource for templates looks like this:

  {
    identifier: 'templates',
    name: 'event-templates',
    list: '/event-templates',
    show: '/event-templates/:id',
    clone: '/event-templates',
    create: '/event-templates/new',
    edit: '/event-templates/edit/:id',
    meta: {
      label: 'Templates',
      icon: <BuildOutlined />,
      parent: 'eventManagement',
    },
  },

What should the route be for the clone action path?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To set up the route for the clone action path in your resource configuration, you need to ensure that the clone property points to the correct path and that the route is defined in your routing configuration. Given your resource configuration for templates, the clone property should point to the path where the clone component will be rendered. Here is how you can set it up: Resource Configuration Your resource configuration looks like this:

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

Routing Configuration You need to define the route for the clone action in your routing configuration. Here is an example of how to do it:

import { Refine } from "@refinedev/core";
import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd";
import { dataProvider } from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { TemplateList, TemplateCreate, TemplateEdit, TemplateShow, TemplateClone } from "./pages/templates";
const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                notificationProvider={notificationProvider}
                Layout={AntdLayout}
                ReadyPage={ReadyPage}
                catchAll={<ErrorComponent />}
                resources={[
                    {
                        identifier: 'templates',
                        name: 'event-templates',
                        list: TemplateList,
                        create: TemplateCreate,
                        edit: TemplateEdit,
                        show: TemplateShow,
                        clone: TemplateClone, // Specify the clone component here
                        meta: {
                            label: 'Templates',
                            icon: <BuildOutlined />,
                            parent: 'eventManagement',
                        },
                    },
                ]}
            >
                <Routes>
                    <Route path="/" element={<Outlet />}>
                        <Route index element={<TemplateList />} />
                        <Route path="event-templates">
                            <Route index element={<TemplateList />} />
                            <Route path="new" element={<TemplateCreate />} />
                            <Route path="edit/:id" element={<TemplateEdit />} />
                            <Route path="show/:id" element={<TemplateShow />} />
                            <Route path="clone/:id" element={<TemplateClone />} /> {/* Define the clone route */}
                        </Route>
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

import { Refine } from "@refinedev/core";
import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd";
import { dataProvider } from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { TemplateList, TemplateCreate, TemplateEdit, TemplateShow, TemplateClone } from "./pages/templates";
const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                notificationProvider={notificationProvider}
                Layout={AntdLayout}
                ReadyPage={ReadyPage}
                catchAll={<ErrorComponent />}
                resources={[
                    {
                        identifier: 'templates',
                        name: 'event-templates',
                        list: TemplateList,
                        create: TemplateCreate,
                        edit: TemplateEdit,
                        show: TemplateShow,
                        clone: TemplateClone, // Specify the clone component here
                        meta: {
                            label: 'Templates',
                            icon: <BuildOutlined />,
                            parent: 'eventManagement',
                        },
                    },
                ]}
            >
                <Routes>
                    <Route path="/" element={<Outlet />}>
                        <Route index element={<TemplateList />} />
                        <Route path="event-templates">
                            <Route index element={<TemplateList />} />
                            <Route path="new" element={<TemplateCreate />} />
                            <Route path="edit/:id" element={<TemplateEdit />} />
                            <Route path="show/:id" element={<TemplateShow />} />
                            <Route path="clone/:id" element={<TemplateClone />} /> {/* Define the clone route */}
                        </Route>
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

Example Clone Component Here is a simple example of what the TemplateClone component might look like: ```jsx import React from "react"; import { useForm } from "@refinedev/antd"; import { Form, Input, Button } from "antd"; const TemplateClone: React.FC = () => { const { formProps, saveButtonProps } = useForm({ action: "clone", }); return ( <Form {...formProps} layout="vertical"> <Form.Item label="Title" name="title"> <Input /> </Form.Item> <Form.Item label="Content" name="content"> <Input.TextArea rows={4} /> </Form.Item> <Button {...saveButtonProps}>Save</Button> </Form> ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai If I want clone a record, shouldn't the form fill out automatically like when I go to edit page?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, when you clone a record, the form should automatically fill out with the existing record's data, similar to how it works on the edit page. This is achieved using the useForm hook with the action: "clone" setting. Here’s how you can set it up: Step-by-Step Guide 1. Define the Clone Component: Create a component for the clone action that uses the useForm hook with the action: "clone" setting. 2. Configure the Resource: Ensure your resource configuration includes the clone path and points to the clone component. 3. Set Up Routing: Define the route for the clone action in your routing configuration. Example Clone Component Here is an example of a clone component using Ant Design and the useForm hook:

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const TemplateClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <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 rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default TemplateClone;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const TemplateClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <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 rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default TemplateClone;

Resource Configuration Ensure your resource configuration includes the clone path and points to the clone component:

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

Routing Configuration Define the route for the clone action in your routing configuration: ```jsx import { Refine } from "@refinedev/core"; import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd"; import { dataProvider } from "@refinedev/simple-rest"; import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; import { TemplateList, TemplateCreate, TemplateEdit, TemplateShow, TemplateClone } from "./pages/templates"; const App: React.FC = () => { return ( <BrowserRouter> <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")} notificationProvider={notificationProvider} Layout={AntdLayout} ReadyPage={ReadyPage} catchAll={<ErrorComponent />} resources={[ { identifier: 'templates', name: 'event-templates', list: TemplateList, create: TemplateCreate, edit: TemplateEdit, show: TemplateShow, clone: TemplateClone, // Specify the clone component here meta: { label: 'Templates', icon: <BuildOutlined />, parent: 'eventManagement', }, }, ]} > <Routes> <Route path="/" element={<Outlet />}> <Route index element={<TemplateList />} /> <Route path="event-templates"> <Route index element={<TemplateList />} /> <Route ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai it does not work

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the clone functionality is not working as expected, let's ensure that all necessary steps are correctly implemented. Here’s a detailed guide to set up the clone functionality in refine using Ant Design: Step-by-Step Guide 1. Define the Clone Component: Create a component for the clone action that uses the useForm hook with the action: "clone" setting. 2. Configure the Resource: Ensure your resource configuration includes the clone path and points to the clone component. 3. Set Up Routing: Define the route for the clone action in your routing configuration. Example Clone Component Here is an example of a clone component using Ant Design and the useForm hook:

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const TemplateClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <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 rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default TemplateClone;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const TemplateClone: React.FC = () => {
    const { formProps, saveButtonProps } = useForm({
        action: "clone",
    });

    return (
        <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 rows={4} />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default TemplateClone;

Resource Configuration Ensure your resource configuration includes the clone path and points to the clone component:

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id', // Update the clone path
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

Routing Configuration Define the route for the clone action in your routing configuration: ```jsx import { Refine } from "@refinedev/core"; import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd"; import { dataProvider } from "@refinedev/simple-rest"; import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; import { TemplateList, TemplateCreate, TemplateEdit, TemplateShow, TemplateClone } from "./pages/templates"; const App: React.FC = () => { return ( <BrowserRouter> <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")} notificationProvider={notificationProvider} Layout={AntdLayout} ReadyPage={ReadyPage} catchAll={<ErrorComponent />} resources={[ { identifier: 'templates', name: 'event-templates', list: TemplateList, create: TemplateCreate, edit: TemplateEdit, show: TemplateShow, clone: TemplateClone, // Specify the clone component here meta: { label: 'Templates', icon: <BuildOutlined />, parent: 'eventManagement', }, }, ]} > <Routes> <Route path="/" element={<Outlet />}> <Route index element={<TemplateList />} /> <Route path="event-templates"> <Route index element={<TemplateList />} /> <Route path="new" element={<TemplateCreate />} /> <Route path="edit/:id" element={<TemplateEdit ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai Here is my resource config:

{
    identifier: 'templates',
    name: 'event-templates',
    list: '/event-templates',
    show: '/event-templates/:id',
    clone: '/event-templates/clone/:id',
    create: '/event-templates/new',
    edit: '/event-templates/edit/:id',
    meta: {
      label: 'Templates',
      icon: <BuildOutlined />,
      parent: 'eventManagement',
    },
  },

{
    identifier: 'templates',
    name: 'event-templates',
    list: '/event-templates',
    show: '/event-templates/:id',
    clone: '/event-templates/clone/:id',
    create: '/event-templates/new',
    edit: '/event-templates/edit/:id',
    meta: {
      label: 'Templates',
      icon: <BuildOutlined />,
      parent: 'eventManagement',
    },
  },

Here is my routing:

 <Route path="/event-templates">
                      <Route index element={<TemplateList />} />
                      <Route path="new" element={<CreateTemplate />} />
                      <Route path="clone/:id" element={<CloneTemplate />} />
                      <Route path="edit/:id" element={<EditTemplate />} />
 </Route>

 <Route path="/event-templates">
                      <Route index element={<TemplateList />} />
                      <Route path="new" element={<CreateTemplate />} />
                      <Route path="clone/:id" element={<CloneTemplate />} />
                      <Route path="edit/:id" element={<EditTemplate />} />
 </Route>

Here is my useForm hook:

const { form, formProps, formLoading, onFinish } = useForm({
    action: 'clone',
    resource: 'event-templates',
    redirect: false,
    mutationMode: 'pessimistic',
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });

const { form, formProps, formLoading, onFinish } = useForm({
    action: 'clone',
    resource: 'event-templates',
    redirect: false,
    mutationMode: 'pessimistic',
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });

It doesn't work like this

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure the clone functionality works correctly, let's review and adjust your setup step-by-step. Resource Configuration Your resource configuration looks correct. It includes the necessary paths for the clone action:

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id',
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id',
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

Routing Configuration Your routing configuration also looks correct. It includes the route for the clone action:

<Route path="/event-templates">
  <Route index element={<TemplateList />} />
  <Route path="new" element={<CreateTemplate />} />
  <Route path="clone/:id" element={<CloneTemplate />} />
  <Route path="edit/:id" element={<EditTemplate />} />
</Route>

<Route path="/event-templates">
  <Route index element={<TemplateList />} />
  <Route path="new" element={<CreateTemplate />} />
  <Route path="clone/:id" element={<CloneTemplate />} />
  <Route path="edit/:id" element={<EditTemplate />} />
</Route>

Clone Component Ensure your CloneTemplate component is correctly set up to use the useForm hook with the action: "clone" setting. Here is an example:

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const CloneTemplate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm({
    action: "clone",
    resource: "event-templates",
    redirect: false,
    mutationMode: "pessimistic",
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });
return (
    <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 rows={4} />
      </Form.Item>
      <Button {...saveButtonProps}>Save</Button>
    </Form>
  );
};

export default CloneTemplate;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const CloneTemplate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm({
    action: "clone",
    resource: "event-templates",
    redirect: false,
    mutationMode: "pessimistic",
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });
return (
    <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 rows={4} />
      </Form.Item>
      <Button {...saveButtonProps}>Save</Button>
    </Form>
  );
};

export default CloneTemplate;

Key Points to Check 1. Ensure useForm Hook is Correctly Configured: - The action should be set to "clone". - The resource should match the resource name in your configuration ("event-templates"). 2. Ensure the Route Path Matches: - The route path for cloning should be /event-templates/clone/:id. 3. Check Data Fetching: - The useForm hook should automatically fetch the data for the record to be cloned using the id from the route. 4. Ensure Dependencies are Correct: - Make sure all necessary dependencies are installed and up-to-date. Example of Full Setup Here is a full example of how everything ties together: #### Resource Configuration

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id',
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

{
  identifier: 'templates',
  name: 'event-templates',
  list: '/event-templates',
  show: '/event-templates/:id',
  clone: '/event-templates/clone/:id',
  create: '/event-templates/new',
  edit: '/event-templates/edit/:id',
  meta: {
    label: 'Templates',
    icon: <BuildOutlined />,
    parent: 'eventManagement',
  },
}

#### Routing Configuration ```jsx import { BrowserRouter, Routes ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

noble-goldOP•7mo ago

@kapa.ai refine doesn't call the api for retrieving the cloned record data when I click on the clone button

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If refine is not calling the API to retrieve the cloned record data when you click on the clone button, there are a few things you need to check and ensure: 1. Correct Configuration of useForm Hook: Ensure that the useForm hook is correctly configured to fetch the data for the record to be cloned. 2. Correct Route Path: Ensure that the route path for the clone action is correctly set up to include the record ID. 3. Correct Usage of CloneButton: Ensure that the CloneButton is correctly set up to pass the record ID to the clone action. Step-by-Step Guide #### 1. Correct Configuration of useForm Hook Ensure that the useForm hook is set up with the action: "clone" and that it correctly fetches the data for the record to be cloned.

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const CloneTemplate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm({
    action: "clone",
    resource: "event-templates",
    redirect: false,
    mutationMode: "pessimistic",
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });

  return (
    <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 rows={4} />
      </Form.Item>
      <Button {...saveButtonProps}>Save</Button>
    </Form>
  );
};

export default CloneTemplate;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const CloneTemplate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm({
    action: "clone",
    resource: "event-templates",
    redirect: false,
    mutationMode: "pessimistic",
    onMutationSuccess: goToListPage,
    meta: {
      customType: true,
      gqlMutation: CREATE_TEMPLATE_MUTATION,
    },
    submitOnEnter: true,
  });

  return (
    <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 rows={4} />
      </Form.Item>
      <Button {...saveButtonProps}>Save</Button>
    </Form>
  );
};

export default CloneTemplate;

#### 2. Correct Route Path Ensure that the route path for the clone action includes the record ID. ```jsx import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; import { Refine } from "@refinedev/core"; import { AntdLayout, notificationProvider, ReadyPage, ErrorComponent } from "@refinedev/antd"; import { dataProvider } from "@refinedev/simple-rest"; import { TemplateList, TemplateCreate, TemplateEdit, TemplateShow, CloneTemplate } from "./pages/templates"; const App: React.FC = () => { return ( <BrowserRouter> <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")} notificationProvider={notificationProvider} Layout={AntdLayout} ReadyPage={ReadyPage} catchAll={<ErrorComponent />} resources={[ { identifier: 'templates', name: 'event-templates', list: TemplateList, create: TemplateCreate, edit: TemplateEdit, show: TemplateShow, clone: CloneTemplate, meta: { label: 'Templates', icon: <BuildOutlined />, parent: 'eventManagement', }, }, ]} > <Routes> <Route path="/" element={<Outlet />}> <Route index element={<TemplateList />} /> <Route path="event-templates"> <Route index element={<TemplateList />} /> <Route path="new" element={<TemplateCreate />} /> <Route path="clone/:id" element={<CloneTemplate />} /> <Route path="edit/:id" element={<TemplateEdit />} /> </Route> </Route> ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

Clone record

Did you find this page helpful?