Add a a POST api call on an a page when edit

Thanks for an awsome framework. I have a page where i do some edits on some fields. Now I also need to do a POST to another api endpoint on the same page on submit. How do I add the second post call
kapa.ai
kapa.ai120d ago
Hi @terrpan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the onFinish hook provided by refine. This hook allows you to override the default configuration of the save button and define what’s sent to the server. Here's an example of how you can use it:
const {
refineCore: { onFinish },
control,
formState: { errors },
handleSubmit,
} = useForm<IPost>({
mode: "onChange",
defaultValues,
});
const {
refineCore: { onFinish },
control,
formState: { errors },
handleSubmit,
} = useForm<IPost>({
mode: "onChange",
defaultValues,
});
In the onFinish function, you can add your custom POST request. Here's an example:
onFinish(async (values) => {
// Your custom POST request
const response = await fetch("/your-api-endpoint", {
method: "POST",
body: JSON.stringify(values),
});
return response.json();
});
onFinish(async (values) => {
// Your custom POST request
const response = await fetch("/your-api-endpoint", {
method: "POST",
body: JSON.stringify(values),
});
return response.json();
});
This will send a POST request to "/your-api-endpoint" with the form values as the request body when the form is submitted. Please note that this is just an example and you might need to adjust it according to your needs. For more information, you can refer to the refine documentation (https://refine.dev/docs/) and this blog post (https://refine.dev/blog/dynamic-forms-in-react-hook-form#handling-submission) on handling form submission with refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai120d ago
<@675721833034809353> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange120d ago
@kapa.ai I want to keep the inital patch but adding an POST to another api endpoint within the same resource
kapa.ai
kapa.ai120d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- You can achieve this by using the useCustomMutation hook provided by refine. This hook allows you to make custom API requests. Here's an example of how you can use it:
const { mutate } = useCustomMutation();

onFinish(async (values) => {
// Your initial PATCH request
await mutate({
resource: "your-resource",
action: "update",
variables: { id: "your-id", values },
});

// Your custom POST request
const response = await fetch("/your-api-endpoint", {
method: "POST",
body: JSON.stringify(values),
});
return response.json();
});
const { mutate } = useCustomMutation();

onFinish(async (values) => {
// Your initial PATCH request
await mutate({
resource: "your-resource",
action: "update",
variables: { id: "your-id", values },
});

// Your custom POST request
const response = await fetch("/your-api-endpoint", {
method: "POST",
body: JSON.stringify(values),
});
return response.json();
});
In this example, mutate is used to make the initial PATCH request to "your-resource". Then, a custom POST request is made to "/your-api-endpoint" with the form values as the request body. Please note that this is just an example and you might need to adjust it according to your needs. For more information, you can refer to the refine documentation (https://refine.dev/docs/) and this discussion (https://github.com/refinedev/refine/discussions/4325) on making POST requests by clicking the Save button. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai120d ago
<@675721833034809353> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emerald117d ago
Hey @terrpan, you can use onSuccess of the mutation or have a custom function that does await mutateAsync() and then calls the other mutation or have it in your data provider's update method to avoid adding additional logic to your component. These options are just the ones top of my head there can be other implementations that may work. To do the second request, you can add an another data provider with a different key (let's say other) and use the useUpdate() hook with dataProviderName: "other" to make it send the request using the other data provider rather than the default one. Check out the Multiple Data Providers section of the Data Provider docs https://refine.dev/docs/data/data-provider/#multiple-data-providers
More Posts
Crud api headerHow can i add a auth token to the header that i call if i use infencerSupabase and RBACHow to implement supabase and RBAC in refine?Group Nav buttons in a bulk buttonHi in the CRUD App is there a way to Group Nav buttons in a bulk button that hide and reveal subbuttSupabase- Ability for admin user to add usersHi everyone, I have a client who's plan for a crud app is to disable user signup as it'll be an inteHow to load a component both in Authenticated and Unauthenticated state?How can I arrange my routes to load a component page both in authenticated and unathenticated state?crud operator for text[]Hi guys, I can't filter my field I have a field name superfood which is a text array in supabase db Nextjs app routerHow setup refine using the latest nextjs app router and shadcn uiWhen sidebar is collapsed, changing page on paginated list open sidebar menu itemWhen changing the page, the page and offset query parameter of path is modified and is detected as aUseMany missing in some generated pages by the MUIinferencerWhats the reason why some List pages are generated by the MUIinferencer with the UseMany methods andgraphql mutationi am using graphql for and i want to pass different meta fields for getOne and update using useForm Filter a table field with outside component and stateHi guys, I'm using useTable to get data from database, here is my useTable code ```const filter = sugraphql mutationI am trying to use useForm from ``` import { useForm } from "@refinedev/react-hook-form"; ``` i waUpdate specific field by using mutate useUpdateHi guys, I'm using mutate of useUpdate() to update a record on my db How can I just update a specifiedit modalI am trying to create a edit modal inside the card. my card contains only name which can be edited oHiding a button in the Navbar based on User Role (MUI)Hi, How can i hide a button in the Nav bar based on the role of the user connected? (MUI)Filtering with useList and state operationHi guys, I currently have a List with useList to get data from a table with supabase Now I have a buHow does useLogin with custom authProvider?I want use custom authProvider and login.include options in useManylike pagination how to add include method in useTable hooks or any other hooks?