solid-orange
solid-orange4mo ago

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
kapa.ai4mo 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
kapa.ai4mo ago
<@700383601887543303> kapa.ai is still learning and improving, please let us know how it did by reacting below
solid-orange
solid-orange4mo 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