like-gold•14mo ago

useModalForm but use it to send GET request with query parameter instead of default action.

instead of default action edit, create and clone of useModalForm. I want to submit the form with GET request and parameter to filter

3 Replies

kapa.ai•14mo ago

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useModalForm hook in Refine is designed to handle forms within a modal and it provides some useful methods to manage the form modal. By default, it supports the actions edit, create, and clone. However, if you want to submit the form with a GET request and parameters to filter, you might need to customize the data provider. Refine allows you to customize the data provider to suit your needs. You can utilize the refineCoreProps.meta object which you can pass to your useModalForm hook. The meta object will be passed to your data provider and you can use it to customize the endpoint or the request method. Here is an example of how you can do it:

const createDrawerFormProps = useModalForm({
    refineCoreProps: { action: "create", meta: { endpoint: "create-user", method: "GET" } },
    syncWithLocation: true,
});

const createDrawerFormProps = useModalForm({
    refineCoreProps: { action: "create", meta: { endpoint: "create-user", method: "GET" } },
    syncWithLocation: true,
});

After this, you can customize your data provider's create function to use meta.endpoint and meta.method instead of the default resource and method.

create: async ({ resource, variables, meta }) => {
    const url = `${apiUrl}/${meta.endpoint}`;
    const method = meta.method || "POST";
    ...
},

create: async ({ resource, variables, meta }) => {
    const url = `${apiUrl}/${meta.endpoint}`;
    const method = meta.method || "POST";
    ...
},

Please note that this is a rough example and you might need to adjust it according to your needs. For more information, you can refer to the following documentation: - useModalForm Hook (https://refine.dev/docs/packages/documentation/react-hook-form/useModalForm/) - Customizing the Data Provider (https://refine.dev/docs/packages/documentation/data-providers/simple-rest/#customizing-the-data-provider) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

like-goldOP•14mo ago

Thanks