foreign-sapphire•15mo ago

How can i POST to a custom endpoint with refine core's useForm hook?

I need to configure a creation form to send a POST request to a custom endpoint. I'm using refine's strapi data provider and refine's react-form-hook useForm

5 Replies

kapa.ai•15mo ago

Hi @gordo_420.6969. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To configure a creation form to send a POST request to a custom endpoint using refine's strapi data provider and refine's react-form-hook useForm, you can follow these steps: 1. Import the necessary components and hooks from refine and react-hook-form:

import { Create, Box, TextField, Button } from "@refinedev/mui";  
import {  
 useForm,  
 Controller,  
 useFieldArray,  
} from "@refinedev/react-hook-form";

import { Create, Box, TextField, Button } from "@refinedev/mui";  
import {  
 useForm,  
 Controller,  
 useFieldArray,  
} from "@refinedev/react-hook-form";

(Source: Dynamic Forms with React Hook Form (https://refine.dev/blog/dynamic-forms-in-react-hook-form/)) 2. Use the useForm hook to handle form submission and validation. Destructure the saveButtonProps variable from the useForm hook and add it to the Create component:

const { saveButtonProps } = useForm();  
  
function UserCreate() {  
 return <Create saveButtonProps={saveButtonProps}></Create>;  
}  
export default UserCreate;

const { saveButtonProps } = useForm();  
  
function UserCreate() {  
 return <Create saveButtonProps={saveButtonProps}></Create>;  
}  
export default UserCreate;

(Source: Dynamic Forms with React Hook Form (https://refine.dev/blog/dynamic-forms-in-react-hook-form/)) 3. If you need to modify the form data before it is sent to the API, you can do so in the onFinishHandler function:

const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
};

const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 fullName: `${data.name} ${data.surname}`,  
 });  
};

(Source: useForm Documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/)) 4. To set the resource attribute that is sent to your dataProvider, you can specify the resource attribute in the useForm hook:

const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>({  
 refineCoreProps: {  
 resource: "yourResourceName",  
 },  
});

const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>({  
 refineCoreProps: {  
 resource: "yourResourceName",  
 },  
});

(Source: Discord support thread: Setting resource for data provider (https://discord.com/channels/837692625737613362/1127194180532318228)) Please replace "yourResourceName" with the name of your resource. This will ensure that the resource attribute is set correctly when the create method of your dataProvider is called. Remember to replace the placeholders in the code snippets with your actual data and logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

foreign-sapphireOP•15mo ago

the provided anwser do not answer the original question. how to starget a custom url when submitting the form? @kapa.ai

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but based on the provided extracts, there isn't a direct way to target a custom URL when submitting the form using the useForm hook in refine. The useForm hook works with the dataProvider prop to handle API requests, and the API endpoint is usually determined by the resource prop in the <Refine> component or the resource attribute in the useForm hook. However, if you need to target a custom URL, you might need to create a custom data provider that can handle this requirement. The data provider is responsible for making the actual API requests, so you can implement the logic for targeting a custom URL in the create method of your custom data provider. Please refer to the refine's data provider documentation (https://refine.dev/docs/core/providers/data-provider/) for more information on how to create a custom data provider. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

How can i POST to a custom endpoint with refine core's useForm hook?

Did you find this page helpful?