adverse-sapphire•3y ago

Setting resource for data provider

How can I set the resource attribute that is sent to my dataProvider by my saveButtonProps? Here is the code I would like to modify the resource for inside the create method of the dataProvider:

const onFinishHandler = (data: FieldValues) => {
        onFinish({
            ...data,
            part_id: data?.part_id?.part_id,
            sagat_type_id: data?.sagat_type_id?.sagat_type_id,
        });
    };

    return (
        <Create isLoading={formLoading} saveButtonProps={{ onClick: handleSubmit(onFinishHandler) }}>
            <Box

const onFinishHandler = (data: FieldValues) => {
        onFinish({
            ...data,
            part_id: data?.part_id?.part_id,
            sagat_type_id: data?.sagat_type_id?.sagat_type_id,
        });
    };

    return (
        <Create isLoading={formLoading} saveButtonProps={{ onClick: handleSubmit(onFinishHandler) }}>
            <Box

14 Replies

kapa.ai•3y ago

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set the resource attribute that is sent to your dataProvider, you can use the useForm hook from Refine. This hook allows you to specify the resource attribute which will be passed to the create method of your dataProvider. Here is an example of how you can use it:

import { useForm } from "@refinedev/react-hook-form";  

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

// Rest of your component
};

import { useForm } from "@refinedev/react-hook-form";  

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

// Rest of your component
};

In the above code, 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. Please note that if the resource is passed, the id from the current URL will be ignored because it may belong to a different resource. To retrieve the id value from the current URL, use the useParsed hook and pass the id value to the useForm hook. For more information, you can refer to the Refine documentation on the useForm hook (https://refine.dev/docs/api-reference/core/hooks/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

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

adverse-sapphireOP•3y ago

@kapa.ai That didnt work. How do I specify the resource's variable that my dataprovider's create method uses. There is nothing in the documentation.

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The resource variable that your dataProvider's create method uses is passed as a parameter to the create method. This parameter is usually used as an API endpoint path. Here is an example of how you can use it in the create method:

export const dataProvider = (apiUrl: string): DataProvider => ({  
 create: async ({ resource, variables }) => {  
 const url = `${apiUrl}/${resource}`;  
  
 const { data } = await axiosInstance.post(url, variables);  
  
 return {  
 data,  
 };  
 },  
 // ...  
});

export const dataProvider = (apiUrl: string): DataProvider => ({  
 create: async ({ resource, variables }) => {  
 const url = `${apiUrl}/${resource}`;  
  
 const { data } = await axiosInstance.post(url, variables);  
  
 return {  
 data,  
 };  
 },  
 // ...  
});

In the above code, resource is the name of the resource you want to create. This is passed as a parameter to the create method. When you want to use the create method, you can use the useCreate hook and pass the resource as a parameter:

const { mutate } = useCreate();  
  
mutate({  
 resource: "posts",  
 values: {  
 title: "New Post",  
 },  
});

const { mutate } = useCreate();  
  
mutate({  
 resource: "posts",  
 values: {  
 title: "New Post",  
 },  
});

In the above code, "posts" is the name of the resource you want to create. For more information, you can refer to the Refine documentation on the create method (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) and the Refine documentation on the useCreate hook (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

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

adverse-sapphireOP•3y ago

@kapa.ai Why is this form not redirecting on form submit: const { saveButtonProps, refineCore: { onFinish, formLoading }, register, control, formState: { errors }, handleSubmit, } = useForm({ refineCoreProps: { resource: "sagats/query", redirect: "list", }, });

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The form might not be redirecting due to a few reasons. Here are some possibilities: 1. The redirect property is set correctly to "list", but the redirection might not be happening due to an error in the form submission or mutation. Make sure that the form submission is successful and there are no errors in the mutation. 2. The redirect function needs to be called after the form submission. In your handleSubmit function, you should call redirect after the onFinish function. Here is an example:

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("list");  
};

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("list");  
};

3. If you're using undoable or optimistic mutation modes, the redirect happens before the mutation succeeds. Therefore, if there is no data in the query cache, the user will be redirected to the list page. 4. If you don't have a list page and you redirect to the list page, the user will be redirected to the list page of the resource. For more information, you can refer to the Refine documentation on the redirect method (https://refine.dev/docs/api-reference/core/hooks/useForm/#redirect) and the Refine documentation on the useForm hook (https://refine.dev/docs/api-reference/core/hooks/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

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

adverse-sapphireOP•3y ago

@kapa.ai I think its because its a custom resource, how can I redirect to the list view of a different resource?

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To redirect to the list view of a different resource, you can use the useNavigation hook provided by Refine. This hook provides a list method that you can use to navigate to the list view of a specific resource. Here is an example of how you can use it:

import { useNavigation } from "@pankod/refine";

const { list } = useNavigation();

const onFinishHandler = (data: FieldValues) => {
    onFinish({
        ...data,
        part_id: data?.part_id?.part_id,
        sagat_type_id: data?.sagat_type_id?.sagat_type_id,
    }).then(() => {
        list("yourResourceName"); // replace "yourResourceName" with the name of your resource
    });
};

return (
    <Create isLoading={formLoading} saveButtonProps={{ onClick: handleSubmit(onFinishHandler) }}>
        <Box
        // Rest of your component
);

import { useNavigation } from "@pankod/refine";

const { list } = useNavigation();

const onFinishHandler = (data: FieldValues) => {
    onFinish({
        ...data,
        part_id: data?.part_id?.part_id,
        sagat_type_id: data?.sagat_type_id?.sagat_type_id,
    }).then(() => {
        list("yourResourceName"); // replace "yourResourceName" with the name of your resource
    });
};

return (
    <Create isLoading={formLoading} saveButtonProps={{ onClick: handleSubmit(onFinishHandler) }}>
        <Box
        // Rest of your component
);

In the above code, replace "yourResourceName" with the name of the resource you want to redirect to. This will ensure that the user is redirected to the list view of the specified resource after the form is submitted. For more information, you can refer to the Refine documentation on the useNavigation hook (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

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

adverse-sapphireOP•3y ago

@kapa.ai how to set canEdit to false in Mui show component

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To set canEdit to false in the Mui Show component, you can pass canEdit={false} as a prop to the Show component. Here is an example:

import { Show } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 canEdit={false}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 canEdit={false}  
 >  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

In the above code, canEdit={false} will prevent the Edit button from rendering in the Show component. For more information, you can refer to the Refine documentation on the Show component (https://refine.dev/docs/api-reference/mui/components/basic-views/show#candelete-and-canedit). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

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

Setting resource for data provider

Did you find this page helpful?