custom endpoint for create page

I want to use a custom endpoint which is "http://localhost:3500/createUser" for this component

import React from "react";
import { Box, TextField } from "@mui/material";
import { IResourceComponentsProps, useParsed, useShow } from "@refinedev/core";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";

interface UserFormValues {
  _id: string;
  username: string;
  email: string;
  phone_number: string;
  roles: string[];
  profile: string;
  address: string;
  postcode: string;
  country: string;
}

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<UserFormValues>({});

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <TextField
          {...register("_id", {
            required: "This field is required",
          })}
          error={!!errors._id}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"User ID"}
          name="_id"
        />
      {/* moreform fields */}

        
      </Box>
    </Create>
  );
};

import React from "react";
import { Box, TextField } from "@mui/material";
import { IResourceComponentsProps, useParsed, useShow } from "@refinedev/core";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";

interface UserFormValues {
  _id: string;
  username: string;
  email: string;
  phone_number: string;
  roles: string[];
  profile: string;
  address: string;
  postcode: string;
  country: string;
}

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<UserFormValues>({});

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <TextField
          {...register("_id", {
            required: "This field is required",
          })}
          error={!!errors._id}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"User ID"}
          name="_id"
        />
      {/* moreform fields */}

        
      </Box>
    </Create>
  );
};

3 Replies

kapa.ai•12mo ago

Hi @Pipo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it's not directly possible to set a custom endpoint for a specific component like Create. The Create component in Refine uses the resource prop to determine which endpoint to interact with. This resource prop is usually defined in the resources array in the Refine component in your App.tsx file. However, you can customize the endpoints your application interacts with by customizing your data provider. The data provider is responsible for making the actual HTTP requests to your API. By customizing the data provider, you can control the endpoints that are used for different operations like create, update, delete, etc. Unfortunately, the extracts provided do not contain specific information on how to customize the data provider in Refine. For more detailed instructions, you should refer to the Refine documentation on data providers (https://refine.dev/docs/data-provider/introduction). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

subsequent-cyanOP•12mo ago

but when i change in app.jsx <Refine dataProvider={dataProvider(HOST_URL)} notificationProvider={notificationProvider} routerProvider={routerBindings} resources={[ { name: "users", list: "/users", show: "/users/show/:id", create: "/Users/createUser", edit: "/users/edit/:id", meta: { canDelete: true, }, }, ]} options={{ syncWithLocation: true, warnWhenUnsavedChanges: true, useNewQueryKeys: true, }} > it unable to find the src\pages\Users\createUser.tsx

custom endpoint for create page

Did you find this page helpful?