conscious-sapphire•2y ago

mutate

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•2y 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 need to handle the form submission manually and make two separate API calls. Unfortunately, the provided code and knowledge sources do not directly cover this scenario. However, I can guide you on how to modify your code to achieve this. Here's how you can adjust your TemplateCreate component to handle this: 1. Handle Form Submission Manually: Use the handleSubmit method from react-hook-form to manage the form submission. 2. Make Two API Calls: Use the mutate function from @refinedev/core to make two separate API calls to save the "title" field in both "category" and "template" resources. Here is the modified code:

"use client";

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

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

  const { mutate: createCategory } = useMutation();
  const { mutate: createTemplate } = useMutation();

  const onSubmit = async (data) => {
    try {
      await createCategory({
        resource: "categories",
        values: { title: data.categoryTitle },
      });

      await createTemplate({
        resource: "templates",
        values: { title: data.templateTitle },
      });

      // Optionally, you can add success notifications or redirection here
    } catch (error) {
      // Handle errors here
    }
  };
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 { useMutation } from "@refinedev/core";

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

  const { mutate: createCategory } = useMutation();
  const { mutate: createTemplate } = useMutation();

  const onSubmit = async (data) => {
    try {
      await createCategory({
        resource: "categories",
        values: { title: data.categoryTitle },
      });

      await createTemplate({
        resource: "templates",
        values: { title: data.templateTitle },
      });

      // Optionally, you can add success notifications or redirection here
    } catch (error) {
      // Handle errors here
    }
  };
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>
  );
}

Explanation: 1. Form Setup: The form is set up using useForm from @refinedev/react-hook-form. 2. API Mutations: Two useMutation hooks are used to handle the API calls for creating a category and a template. 3. Form Submission: The handleSubmit method is used to handle form submission, making two separate API calls to save the "title" field in both "category" and "template" resources. This approach ensures that the "title" field is stored in both the "category" and "template" resources as required. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

conscious-sapphireOP•2y ago

@kapa.ai Unhandled Runtime Error Error: Function not implemented. Source src\app\dashboard\templates\create\page.tsx (76:8) @ useMutation 74 | } 75 | function useMutation(): { mutate: any } {

76 | throw new Error("Function not implemented.");

| ^ 77 | }

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It looks like you are encountering an error because the useMutation function is not implemented. To resolve this, you need to import the useMutation hook from @refinedev/core correctly. Here is the corrected code with the proper import for useMutation:

"use client";

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

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

  const { mutate: createCategory } = useMutation();
  const { mutate: createTemplate } = useMutation();

  const onSubmit = async (data) => {
    try {
      await createCategory({
        resource: "categories",
        values: { title: data.categoryTitle },
      });

      await createTemplate({
        resource: "templates",
        values: { title: data.templateTitle },
      });

      // Optionally, you can add success notifications or redirection here
    } catch (error) {
      // Handle errors here
    }
  };
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 { useMutation } from "@refinedev/core"; // Correct import

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

  const { mutate: createCategory } = useMutation();
  const { mutate: createTemplate } = useMutation();

  const onSubmit = async (data) => {
    try {
      await createCategory({
        resource: "categories",
        values: { title: data.categoryTitle },
      });

      await createTemplate({
        resource: "templates",
        values: { title: data.templateTitle },
      });

      // Optionally, you can add success notifications or redirection here
    } catch (error) {
      // Handle errors here
    }
  };
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>
  );
}

Explanation: 1. Correct Import: Ensure that useMutation is imported from @refinedev/core. 2. Form Setup: The form is set up using useForm from @refinedev/react-hook-form. 3. API Mutations: Two useMutation hooks are used to handle the API calls for creating a category and a template. 4. Form Submission: The handleSubmit method is used to handle form submission, making two separate API calls to save the "title" field in both "category" and "template" resources. This should resolve the "Function not implemented" error and allow you to store the "title" field in both resources as required. If you need more details, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/material-ui/introduction/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

mutate

Did you find this page helpful?