relaxed-coral•4mo ago

multiple resource

"use client"; import { Box, TextField } from "@mui/material"; import { Create } from "@refinedev/mui"; import { useForm } from "@refinedev/react-hook-form"; export default function TemplateCreate() { const { saveButtonProps, refineCore: { formLoading }, register, formState: { errors }, } = useForm({ refineCoreProps: { resource: "categories", }, }); return ( <Create isLoading={formLoading} saveButtonProps={saveButtonProps}> <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off" > <TextField {...register("title", { required: "This field is required", })} error={!!(errors as any)?.title} helperText={(errors as any)?.title?.message} margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="text" label={"Title"} name="title" /> <TextField {...register("title", { required: "This field is required", })} error={!!(errors as any)?.title} helperText={(errors as any)?.title?.message} margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="text" label={"Title"} name="title" /> </Box> </Create> ); } @kapa.ai Here i want to store "title" field one in resource "category" and "title" field two in resource "template"

5 Replies

kapa.ai•4mo ago

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve storing the "title" field in two different resources ("category" and "template"), you will need to handle the form submission manually and make two separate API calls. Unfortunately, the provided knowledge sources do not include a direct example of handling multiple resources in a single form submission. However, I can guide you on how to approach this based on the general usage of useForm and Create components in refine. Here's a modified version of your code to handle the form submission manually:

"use client";

import { Box, TextField, Button } from "@mui/material";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { useApiUrl, useCustom } from "@refinedev/core";

export default function TemplateCreate() {
  const apiUrl = useApiUrl();
  const { mutate: createCategory } = useCustom({
    url: `${apiUrl}/categories`,
    method: "post",
  });
  const { mutate: createTemplate } = useCustom({
    url: `${apiUrl}/templates`,
    method: "post",
  });

  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      await createCategory({ data: { title: data.categoryTitle } });
      await createTemplate({ data: { title: data.templateTitle } });
      // Handle success (e.g., show a success message, redirect, etc.)
    } catch (error) {
      // Handle error (e.g., show an error message)
    }
  };
return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
        onSubmit={handleSubmit(onSubmit)}
      >
        <TextField
          {...register("categoryTitle", {
            required: "This field is required",
          })}
          error={!!errors.categoryTitle}
          helperText={errors.categoryTitle?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Category Title"}
          name="categoryTitle"
        />
        <TextField
          {...register("templateTitle", {
            required: "This field is required",
          })}
          error={!!errors.templateTitle}
          helperText={errors.templateTitle?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Template Title"}
          name="templateTitle"
        />
        <Button type="submit" {...saveButtonProps}>
          Save
        </Button>
      </Box>
    </Create>
  );
}

"use client";

import { Box, TextField, Button } from "@mui/material";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { useApiUrl, useCustom } from "@refinedev/core";

export default function TemplateCreate() {
  const apiUrl = useApiUrl();
  const { mutate: createCategory } = useCustom({
    url: `${apiUrl}/categories`,
    method: "post",
  });
  const { mutate: createTemplate } = useCustom({
    url: `${apiUrl}/templates`,
    method: "post",
  });

  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      await createCategory({ data: { title: data.categoryTitle } });
      await createTemplate({ data: { title: data.templateTitle } });
      // Handle success (e.g., show a success message, redirect, etc.)
    } catch (error) {
      // Handle error (e.g., show an error message)
    }
  };
return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
        onSubmit={handleSubmit(onSubmit)}
      >
        <TextField
          {...register("categoryTitle", {
            required: "This field is required",
          })}
          error={!!errors.categoryTitle}
          helperText={errors.categoryTitle?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Category Title"}
          name="categoryTitle"
        />
        <TextField
          {...register("templateTitle", {
            required: "This field is required",
          })}
          error={!!errors.templateTitle}
          helperText={errors.templateTitle?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Template Title"}
          name="templateTitle"
        />
        <Button type="submit" {...saveButtonProps}>
          Save
        </Button>
      </Box>
    </Create>
  );
}

In this example: 1. We use useCustom to create custom mutations for the "categories" and "templates" resources. 2. We handle the form submission manually using handleSubmit from useForm. 3. On form submission, we make two separate API calls to store the titles in their respective resources. This approach ensures that each title is stored in the correct resource. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

relaxed-coral•4mo ago

Property 'mutate' does not exist on type 'QueryObserverResult<CustomResponse<BaseRecord>, HttpError> & UseLoadingOvertimeReturnType'.ts(2339) any @kapa.ai

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message

Property 'mutate' does not exist on type 'QueryObserverResult<CustomResponse<BaseRecord>, HttpError> & UseLoadingOvertimeReturnType'.ts(2339)

indicates that you are trying to use the mutate function on a type that does not support it. This typically happens when you are using a hook that is meant for querying data rather than mutating it. In refine, hooks like useQuery are used for fetching data, while hooks like useMutation (e.g., useCreate, useUpdate, useDelete) are used for mutating data. To resolve this issue, ensure you are using the correct hook for the operation you intend to perform. For example, if you want to update data, you should use the useUpdate hook. Here is an example of how to use the useUpdate hook correctly:

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();

mutate({
  resource: "posts",
  id: 1,
  values: {
    title: "New title",
  },
  meta: {
    method: "put",
  },
});

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();

mutate({
  resource: "posts",
  id: 1,
  values: {
    title: "New title",
  },
  meta: {
    method: "put",
  },
});

Make sure you include the values property in the mutate function call, as it is required for the useUpdate hook to work correctly. The values property contains the data that will be sent to the server. For more details, you can refer to the useUpdate documentation (https://refine.dev/docs/data/hooks/use-update/#values-). If you are trying to perform a GET request on a button click, you should use a different approach, such as using useCustom or useQuery with a manual trigger. However, the provided knowledge sources do not include a direct example of this. You can refer to the refine documentation for more information on custom requests. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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