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
6 Replies
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:
In the onFinish
function, you can add your custom POST request. Here's an example:
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:
----------------------<@675721833034809353> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•8mo ago
@kapa.ai I want to keep the inital patch but adding an POST to another api endpoint within the same resource
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:
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:
----------------------<@675721833034809353> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•8mo 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