How may I create many records with useForm and useCreateMany?

I'm trying to create many records with a form. I will use onFinish for now, but is it the right approach?

5 Replies

Hi @pedroddomingues. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create many records using useForm and useCreateMany in refine, you can follow these steps: 1. Use the useForm hook to handle your form state and submission. 2. Use the useCreateMany hook to handle the bulk creation of records. 3. In the onFinish function of your form, call the mutate function provided by useCreateMany. Here's an example of how you can implement this:

import { useForm } from "@refinedev/react-hook-form";
import { useCreateMany } from "@refinedev/core";

const YourComponent = () => {
  const { mutate } = useCreateMany();
  const {
    refineCore: { onFinish, formLoading },
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const handleFormSubmit = async (data) => {
    await mutate({
      resource: "your-resource",
      values: data.records, // Assuming your form data has a 'records' array
    });
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      {/* Your form fields here */}
      <input type="submit" disabled={formLoading} value="Submit" />
    </form>
  );
};

import { useForm } from "@refinedev/react-hook-form";
import { useCreateMany } from "@refinedev/core";

const YourComponent = () => {
  const { mutate } = useCreateMany();
  const {
    refineCore: { onFinish, formLoading },
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const handleFormSubmit = async (data) => {
    await mutate({
      resource: "your-resource",
      values: data.records, // Assuming your form data has a 'records' array
    });
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      {/* Your form fields here */}
      <input type="submit" disabled={formLoading} value="Submit" />
    </form>
  );
};

Using onFinish is indeed a correct approach. The onFinish function provided by useForm is designed to handle form submission as mentioned in the refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#action-). However, for bulk creation, you'll want to use the mutate function from useCreateMany directly in your form submission handler, as shown in the example above. The useCreateMany hook is specifically designed for creating multiple records at once as described in the refine documentation (https://refine.dev/docs/data/hooks/use-create-many/#usage). It's more efficient than calling create multiple times for individual records. Remember to adjust the resource and values in the mutate call according to your specific use case and data structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@316665199249719296> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

flat-fuchsiaOP•2mo ago

@kapa.ai ok, do you have an example using antd?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I can provide you with an example using Ant Design (antd) components along with refine's useForm and useCreateMany hooks. Here's how you can create many records using a form with Ant Design:

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

const ProductCreate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();
  const { mutate } = useCreateMany();

  const onFinish = async (values: any) => {
    await mutate({
      resource: "products",
      values: [values], // Wrap the single product in an array for useCreateMany
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={onFinish}>
        <Form.Item
          label="Name"
          name="name"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Price"
          name="price"
          rules={[{ required: true }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Create
          </Button>
        </Form.Item>
      </Form>
    </Create>
  );
};

export default ProductCreate;

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

const ProductCreate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();
  const { mutate } = useCreateMany();

  const onFinish = async (values: any) => {
    await mutate({
      resource: "products",
      values: [values], // Wrap the single product in an array for useCreateMany
    });
  };

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} onFinish={onFinish}>
        <Form.Item
          label="Name"
          name="name"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Price"
          name="price"
          rules={[{ required: true }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Create
          </Button>
        </Form.Item>
      </Form>
    </Create>
  );
};

export default ProductCreate;

This example uses the Ant Design components and refine's hooks as described in the refine Ant Design documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#example). Here's what's happening: 1. We import the necessary components and hooks from @refinedev/antd, @refinedev/core, and antd. 2. We use the useForm hook from @refinedev/antd to handle form state and submission. 3. We use the useCreateMany hook to handle the creation of multiple records. 4. In the onFinish function, we call the mutate function from useCreateMany to create the records. 5. We use Ant Design's Form, Form.Item, Input, and Button components to build the form UI. Note that in this example, we're creating a single product at a time, but wrapping it in an array for useCreateMany. If you need to create multiple products at once, you'd need to adjust your form to allow for multiple inputs and then pass an array of products to the mutate function. This approach combines the ease of use of Ant Design's form components with refine's data handling capabilities, providing a smooth way to create records in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@316665199249719296> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How may I create many records with useForm and useCreateMany?

Did you find this page helpful?