4. Adding Create Page

Create page is the page where you can create the record. In this tutorial, we will create the create page for the blog_posts resource.

Creating Create Page

First, let's create our file under the src/pages/blog-posts folder. We will name it create.tsx. Then, we will copy the create page code generated by Inferencer and paste it into the file.

To copy the code and paste it into the file, follow the steps below:

1. Navigate to the localhost:3000/blog-posts in your browser.

2. To open the create page, click the "Create" button in the top right corner of the table.

3. On the create page, click on the "Show Code" button in the bottom right corner of the page.

4. You can see the create page code generated by Inferencer. Click on the "Copy" button to copy the code.

5. Paste the code into the you created, create.tsx file.

You can see the create page code generated by Inferencer below:

http://localhost:3000

setInitialRoutes(['/blog-posts/create'])

import {
  ErrorComponent,
  ThemedLayout,
  RefineThemes,
  notificationProvider,
} from '@refinedev/antd'
import { Refine } from '@refinedev/core'
import { AntdInferencer } from '@refinedev/inferencer/antd'
import routerBindings, {
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'

import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom'

import { ConfigProvider } from 'antd'
import '@refinedev/antd/dist/reset.css'

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <ConfigProvider theme={RefineThemes.Blue}>
        <Refine
          routerProvider={routerBindings}
          dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
          notificationProvider={notificationProvider}
          resources={[
            {
              name: 'blog_posts',
              list: '/blog-posts',
              show: '/blog-posts/show/:id',
              create: '/blog-posts/create',
              edit: '/blog-posts/edit/:id',
            },
          ]}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
        >
          <Routes>
            <Route
              element={
                <ThemedLayout>
                  <Outlet />
                </ThemedLayout>
              }
            >
              <Route
                index
                element={<NavigateToResource resource="blog_posts" />}
              />

              <Route path="blog-posts">
                <Route index element={<AntdInferencer />} />
                <Route path="show/:id" element={<AntdInferencer />} />
                <Route path="edit/:id" element={<AntdInferencer />} />
                <Route path="create" element={<AntdInferencer />} />
              </Route>

              <Route path="*" element={<ErrorComponent />} />
            </Route>
          </Routes>
          <UnsavedChangesNotifier />
        </Refine>
      </ConfigProvider>
    </BrowserRouter>
  )
}

render(<App />)

Instead of coding the create page component from scratch, Inferencer've created the required code base on API response, so that we can customize.

Understanding the Create Component

We will go through the create page components and hooks one by one.

• <Create/> is a refine component that is used to presentation purposes like showing the title of the page, save button etc.

  Refer to the <Create/> documentation for more information &#8594

• <Form/> and <Form.Item/> are Ant Design components that are used to build the form.

  Refer to the Ant Design <Form/> documentation for more information &#8594

• useForm is a refine hook that provides the necessary props for the form. It also provides the saveButtonProps prop that we can pass to the submit button of the form.

  When you use useForm in the create page, it sends the form data to dataProvider's create method when the form is submitted.

  Refer to the useForm documentation for more information &#8594

Handling Relationships

In the create page, we may need to select a record from another resource. For example, we may need to select a category from the categories resource to assign the blog post to the category. In this case, we can use the useSelect hook provided by refine. This hook fetches the data by passing the resource name to the dataProvider's getList method. Then, it returns the necessary props for the <Select/> component.

Refer to the useSelect documentation for more information &#8594

Refer to the Ant Design <Select/> documentation for more information &#8594

In the auto-generated create page code, Inferencer used the useSelect hook to select a category from the categories resource like below:

const { selectProps: categorySelectProps } = useSelect({
  resource: 'categories',
})

Adding the Create Page to the App

Now that we have created the create page, we need to add it to the App.tsx file.

1. Open src/App.tsx file on your editor.

2. Import the created BlogPostCreate component.

3. Replace the AntdInferencer component with the BlogPostCreate component.

src/App.tsx

import {
  ErrorComponent,
  ThemedLayout,
  RefineThemes,
  notificationProvider,
} from '@refinedev/antd'
import { Refine } from '@refinedev/core'
import routerBindings, {
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'

import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom'

import { BlogPostEdit } from 'pages/blog-posts/edit'
import { BlogPostList } from 'pages/blog-posts/list'
import { BlogPostShow } from 'pages/blog-posts.show'
import { BlogPostCreate } from 'pages/blog-posts/create'

import { ConfigProvider } from 'antd'
import '@refinedev/antd/dist/reset.css'

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <ConfigProvider theme={RefineThemes.Blue}>
        <Refine
          routerProvider={routerBindings}
          dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
          notificationProvider={notificationProvider}
          resources={[
            {
              name: 'blog_posts',
              list: '/blog-posts',
              show: '/blog-posts/show/:id',
              create: '/blog-posts/create',
              edit: '/blog-posts/edit/:id',
            },
          ]}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
        >
          <Routes>
            <Route
              element={
                <ThemedLayout>
                  <Outlet />
                </ThemedLayout>
              }
            >
              <Route
                index
                element={<NavigateToResource resource="blog_posts" />}
              />

              <Route path="blog-posts">
                <Route index element={<BlogPostList />} />
                <Route path="show/:id" element={<BlogPostShow />} />
                <Route path="create" element={<BlogPostCreate />} />
                <Route path="edit/:id" element={<BlogPostEdit />} />
              </Route>

              <Route path="*" element={<ErrorComponent />} />
            </Route>
          </Routes>
          <UnsavedChangesNotifier />
        </Refine>
      </ConfigProvider>
    </BrowserRouter>
  )
}

export default App

Now, we can see the create page in the browser at localhost:3000/blog-posts/create

Checklist

I added the create page to the app.

I understood the create page components and hooks.

I understood the relationship handling.