create resource with another resource as a field

In the create form how can I add an input that is another resource

2 Replies

Hi @Pops / Spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a resource with another resource as a field in a create form using Refine, you can use the useSelect or useAutocomplete hooks to fetch and display the related resource data. Below are examples using different UI frameworks supported by Refine. Using Ant Design For Ant Design, you can use the useSelect hook to create a select input for the related resource. Here is an example:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { useSelect } from "@refinedev/core";
import { Select } from "antd";

export const CreateProduct: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading },
        register,
        handleSubmit,
    } = useForm<IProduct>({
        refineCoreProps: {
            resource: "products",
            action: "create",
        },
    });

    const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <form onSubmit={handleSubmit(onFinish)}>
            <label>Category</label>
            <Select {...categorySelectProps} {...register("category.id")} />
            <button type="submit" disabled={formLoading}>Submit</button>
        </form>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { useSelect } from "@refinedev/core";
import { Select } from "antd";

export const CreateProduct: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading },
        register,
        handleSubmit,
    } = useForm<IProduct>({
        refineCoreProps: {
            resource: "products",
            action: "create",
        },
    });

    const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <form onSubmit={handleSubmit(onFinish)}>
            <label>Category</label>
            <Select {...categorySelectProps} {...register("category.id")} />
            <button type="submit" disabled={formLoading}>Submit</button>
        </form>
    );
};

Source (https://refine.dev/docs/guides-concepts/forms/#relationships-) Using Material UI For Material UI, you can use the useAutocomplete hook to create an autocomplete input for the related resource. Here is an example:

import { Create, useAutocomplete } from "@refinedev/mui";
import { Box, Autocomplete, TextField } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

interface ICategory {
  id: number;
  title: string;
}
const PostCreate: React.FC = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    control,
    formState: { errors },
  } = useForm<IPost, HttpError, IPost & { category: ICategory }>();

  const { autocompleteProps } = useAutocomplete<ICategory>({
    resource: "categories",
  });

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form">
        <Controller
          control={control}
          name="category"
          rules={{ required: "This field is required" }}
          render={({ field }) => (
            <Autocomplete
              {...autocompleteProps}
              {...field}
              onChange={(_, value) => {
                field.onChange(value);
              }}
              getOptionLabel={({ title }) => title}
              isOptionEqualToValue={(option, value) =>
                value === undefined ||
                option?.id?.toString() === (value?.id ?? value)?.toString()
              }
              placeholder="Select a category"
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Category"
                  margin="normal"
                  variant="outlined"
                  error={!!errors.category}
                  helperText={errors.category?.message}
                  required
                />
              )}
            />
          )}
        />
      </Box>
    </Create>
  );
};

import { Create, useAutocomplete } from "@refinedev/mui";
import { Box, Autocomplete, TextField } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";

interface ICategory {
  id: number;
  title: string;
}
const PostCreate: React.FC = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    control,
    formState: { errors },
  } = useForm<IPost, HttpError, IPost & { category: ICategory }>();

  const { autocompleteProps } = useAutocomplete<ICategory>({
    resource: "categories",
  });

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form">
        <Controller
          control={control}
          name="category"
          rules={{ required: "This field is required" }}
          render={({ field }) => (
            <Autocomplete
              {...autocompleteProps}
              {...field}
              onChange={(_, value) => {
                field.onChange(value);
              }}
              getOptionLabel={({ title }) => title}
              isOptionEqualToValue={(option, value) =>
                value === undefined ||
                option?.id?.toString() === (value?.id ?? value)?.toString()
              }
              placeholder="Select a category"
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Category"
                  margin="normal"
                  variant="outlined"
                  error={!!errors.category}
                  helperText={errors.category?.message}
                  required
                />
              )}
            />
          )}
        />
      </Box>
    </Create>
  );
};

Source (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-auto-complete/#how-do-i-use-it-with-crud-components-and-useform) Using Mantine For Mantine, you can use the useSelect hook similarly to how it's used with Ant Design. Here is an example: ```tsx import React ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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