Custom url for create

<Create resource="rules"/> How can i change the create url endpoint, i want api path to be different from default??

12 Replies

kapa.ai•12mo ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, the resource prop in the Create component or useCreate and useCreateMany hooks is used to define the API endpoint path. By default, the Create component reads the resource information from the route. If you want to use a custom resource for the Create component, you can use the resource prop. Here is an example of how you can use a custom resource in the Create component:

import { Create } from "@refinedev/mui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Create resource="posts">  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

import { Create } from "@refinedev/mui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Create resource="posts">  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

In the useCreate and useCreateMany hooks, you can pass the resource parameter to the mutate method:

const { mutate } = useCreate();  
  
mutate({  
 resource: "categories",  
});

const { mutate } = useCreate();  
  
mutate({  
 resource: "categories",  
});

If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component. For more information, refer to the creating a data provider tutorial (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) and the identifier section of the <Refine/> component documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#identifier). Sources: - Create Component Documentation (https://refine.dev/docs/api-reference/mui/components/basic-views/create/) - useCreate Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/) - useCreateMany Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreateMany/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

metropolitan-bronze•12mo ago

Hey @dreamer9067, You can use the resource prop like below:

const {mutate} = useCreate()

mutate({
  resource: "roles/foo/bar",
  ...
})

const {mutate} = useCreate()

mutate({
  resource: "roles/foo/bar",
  ...
})

Or, you can customize your dataProvider according to your meta usage like following: https://refine.dev/docs/api-reference/core/hooks/data/useCreate/#meta

clever-tan•12mo ago

cool thanks will try it out hey @salihozdemir @kapa.ai thanks for help it worked quite good, but stuck in another issue. After mutate runs i'm trying to redirect to listing but it shows a popup saying warnunsavedchanges. How can i avoid that: mutate({ resource: "rules/create", values:ruleCreateObject, }, { onSuccess:(data, variables, context)=>{ redirect("list"); } })

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warnWhenUnsavedChanges feature in refine shows a confirmation modal when you try to leave the current page with unsaved changes. This feature is false by default, but if it's enabled in your application, it could be causing the popup you're seeing. You can disable this feature by setting warnWhenUnsavedChanges to false in the <Refine> component or in the useForm or useModalForm hooks. Here's how you can do it in the <Refine> component:

<Refine  
  options={{  
    warnWhenUnsavedChanges: false,  
  }}  
/>

<Refine  
  options={{  
    warnWhenUnsavedChanges: false,  
  }}  
/>

And here's how you can do it in the useForm or useModalForm hooks:

const form = useForm({  
  warnWhenUnsavedChanges: false,  
});  

// or

const modalForm = useModalForm({  
  warnWhenUnsavedChanges: false,  
});

const form = useForm({  
  warnWhenUnsavedChanges: false,  
});  

// or

const modalForm = useModalForm({  
  warnWhenUnsavedChanges: false,  
});

Please note that the UnsavedChangesNotifier component also needs to be mounted for this feature to work. You can import this component from your router package. Sources: - Refine Config Documentation (https://refine.dev/docs/api-reference/core/components/refine-config/) - useForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/) - useModalForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useModalForm/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

clever-tan•12mo ago

no no i want to have feature of warning without leaving, but when i mutate and navigate programatically i dont want the popup. @kapa.ai

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warnWhenUnsavedChanges feature in refine is designed to warn users when they try to navigate away from a page with unsaved changes. This includes both manual navigation by the user and programmatic navigation using the redirect function. If you want to keep the warning feature but avoid the popup when redirecting programmatically, you can use the form.change method to manually set the form state to "pristine" before redirecting. This will tell refine that there are no unsaved changes and prevent the warning popup from appearing. Here's how you can do it:

const { form } = useForm();

mutate({
  resource: "rules/create",
  values: ruleCreateObject,
}, {
  onSuccess: (data, variables, context) => {
    form.change(); // Set form state to "pristine"
    redirect("list");
  }
});

const { form } = useForm();

mutate({
  resource: "rules/create",
  values: ruleCreateObject,
}, {
  onSuccess: (data, variables, context) => {
    form.change(); // Set form state to "pristine"
    redirect("list");
  }
});

Please note that this will only work if you're using the useForm or useModalForm hooks to manage your form state. Sources: - useForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/) - useModalForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useModalForm/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

clever-tan•12mo ago

@kapa.ai there is on change method as such, but there is submit which gets the expected behaviour

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to programmatically submit the form and then redirect without triggering the warnWhenUnsavedChanges warning, you can use the onFinish method from the useForm hook. The onFinish method submits the form and sets the form state to "pristine", which means there are no unsaved changes. Here's how you can do it:

const { onFinish, redirect } = useForm();

const handleSubmit = async () => {
  const data = await onFinish(ruleCreateObject);
  redirect("list");
};

mutate({
  resource: "rules/create",
  values: ruleCreateObject,
}, {
  onSuccess: (data, variables, context) => {
    handleSubmit();
  }
});

const { onFinish, redirect } = useForm();

const handleSubmit = async () => {
  const data = await onFinish(ruleCreateObject);
  redirect("list");
};

mutate({
  resource: "rules/create",
  values: ruleCreateObject,
}, {
  onSuccess: (data, variables, context) => {
    handleSubmit();
  }
});

In this example, handleSubmit is a function that submits the form using the onFinish method and then redirects to the list page. This function is called in the onSuccess callback of the mutate method. Please note that this will only work if you're using the useForm or useModalForm hooks to manage your form state. Sources: - useForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/) - useModalForm Hook Documentation (https://refine.dev/docs/api-reference/core/hooks/useModalForm/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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