foreign-sapphire•12mo ago

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

kapa.ai•12mo 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•12mo ago

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

foreign-sapphireOP•12mo ago

@kapa.ai I want to keep the inital patch but adding an POST to another api endpoint within the same resource

kapa.ai•12mo 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•12mo ago

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

noble-gold•12mo 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