flow of create.tsx

explain the data flow from default create page from antd inferencer until the data sent to endpoint api

4 Replies

kapa.ai•12mo ago

Hi @M Farhan Zachary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The flow of creating a page using the Ant Design Inferencer in Refine is as follows: 1. First, you need to create a file named create.tsx under the src/pages/blog-posts folder. 2. Then, navigate to localhost:3000/blog-posts in your browser and click the "Create" button in the top right corner of the table to open the create page. 3. On the create page, click on the "Show Code" button in the bottom right corner of the page. This will show you the create page code generated by Inferencer. 4. Copy the generated code by clicking on the "Copy" button and paste it into the newly created create.tsx file. The Inferencer generates a sample create view for your resources according to the first record in the list API response. It uses the Create component and the useForm hook from @refinedev/antd. Here is an example of how the code might look:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { ConfigProvider } from "antd";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
import { AntdInferencer } from "@refinedev/inferencer/antd";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "samples",  
 create: "/samples/create",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <ThemedLayoutV2>  
 <Outlet />  
 </ThemedLayoutV2>  
 }  
 >  
 <Route path="/samples/create" element={<AntdInferencer />} />  
 </Route>  
 </Routes>  
 </Refine>  
 </ConfigProvider>  
 </BrowserRouter>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { ConfigProvider } from "antd";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
import { AntdInferencer } from "@refinedev/inferencer/antd";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "samples",  
 create: "/samples/create",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <ThemedLayoutV2>  
 <Outlet />  
 </ThemedLayoutV2>  
 }  
 >  
 <Route path="/samples/create" element={<AntdInferencer />} />  
 </Route>  
 </Routes>  
 </Refine>  
 </ConfigProvider>  
 </BrowserRouter>  
 );  
};

In this example, the dataProvider is set to a fake REST API endpoint, and the create property of the resources prop is set to the path of the create page (/samples/create). When you submit the form on the create page, the data is sent to the API endpoint specified in the dataProvider. For more details, you can refer to the Refine documentation (https://refine.dev/docs/tutorial/adding-crud-pages/headless/add-create-page#creating-create-page) and the Refine UI Integrations documentation (https://refine.dev/docs/ui-integrations/ant-design/components/inferencer#create). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

foreign-sapphireOP•12mo ago

no, i want you to explain how the data handled from form until that data sent to endpoint @kapa.ai

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, let's break down the data flow from the form to the API endpoint using the useForm hook in Refine. 1. Form Initialization: The useForm hook from Refine is used to handle form data. It offers adapters that let Refine integrate with Ant Design's <Form> component. The useForm hook is called inside the component, and its properties are destructured. The formProps property contains all the necessary properties for the form to handle the POST request for its data automatically.

const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
} = useForm();

const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
} = useForm();

2. Form Submission: The handleSubmit function from useForm is used to handle form submission. It takes a callback function as an argument, which is called when the form is submitted. The callback function receives the form data as its argument.

<form onSubmit={handleSubmit(onFinishHandler)}>

<form onSubmit={handleSubmit(onFinishHandler)}>

3. Data Modification: Before the data is sent to the API, you may need to modify it. For example, you might want to combine the name and surname fields into a fullName field. This can be done in the onFinishHandler function.

const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
};

const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
};

4. Data Submission: The modified data is then passed to the onFinish function from useForm, which handles the actual submission of the data to the API.

onFinish({  
 fullName: `${data.name} ${data.surname}`,  
});

onFinish({  
 fullName: `${data.name} ${data.surname}`,  
});

5. API Interaction: The onFinish function sends a POST request to the API endpoint specified in the dataProvider prop. The form data is included in the body of the request. For more details, 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) and the Refine blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#creating-a-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

flow of create.tsx

Did you find this page helpful?