ambitious-aqua
ambitious-aqua9mo ago

useCreate with custom url

exist a way to use useCreate hook with a custom url to post?
5 Replies
kapa.ai
kapa.ai9mo ago
Hi @jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useCreate hook in Refine is designed to work with the resource-based structure of Refine and doesn't directly support custom URLs. However, you can achieve a similar effect by using the useCustom hook, which allows you to send custom query requests with a specified URL and method. Here's an example of how you can use the useCustom hook:
import { useCustom, useApiUrl } from "@refinedev/core";

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom({
url: `${apiUrl}/your-custom-url`,
method: "post",
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
});
import { useCustom, useApiUrl } from "@refinedev/core";

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom({
url: `${apiUrl}/your-custom-url`,
method: "post",
config: {
headers: {
"x-custom-header": "foo-bar",
},
query: {
title: "Foo bar",
},
},
});
In this example, replace your-custom-url with your desired endpoint, and adjust the config object to fit your needs. The method is set to "post" to mimic the behavior of useCreate. Remember, useCustom does not invalidate queries and therefore will not update the application state. If you need to update the state after the custom create operation, you might need to manually invalidate queries or update the cache. For more information, refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom) and the custom method documentation (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider#custom). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aqua9mo ago
@kapa.ai I changed the endpoint name, so I can use useCreate now, but now, how can I redirect to the list view after getting a 201 response?
kapa.ai
kapa.ai9mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- After a successful mutation, Refine's useForm hook will redirect to the "list" page by default. If you want to redirect to a different page, you can use the redirect function to programmatically specify the destination, or set the redirect property in the hook's options. Here's an example of how you can use the redirect function:
const {
refineCore: { onFinish, redirect },
} = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const data = await onFinish(formValues);
redirect("list", data?.data?.id);
};
const {
refineCore: { onFinish, redirect },
} = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const data = await onFinish(formValues);
redirect("list", data?.data?.id);
};
In this example, after a successful mutation, the application will redirect to the "list" page. Replace "list" with the name of the page you want to redirect to. You can also set the redirect property in the useForm hook's options to specify the redirection behavior:
useForm({ redirect: "list" });
useForm({ redirect: "list" });
In this example, after a successful mutation, the application will redirect to the "list" page. Please note that this will only work if you have routerProvider defined in your <Refine> component along with the proper resource definition with routes and actions. For more information, refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form) and the <Refine> component documentation (https://refine.dev/docs/core/refine-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below