continuing-cyan•2y ago

Change url between list and edit

Hi erveyone !! actually I have an endpoint which return me all admin user (myUrl/api/admins) and to edit these a user i need to patch on an other endpoint (myUrl/api/user/{id}). {id} is the id of the user i need to edit. I would like to know if it is possible to use an endpoint for the list view and an other for editing and if it is, how can do that ? Thank you guys !!

38 Replies

kapa.ai•2y ago

Hey @harisris! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- Hi there! It is possible to use different endpoints for the list view and edit view. You can do this by using the edit method of the useNavigation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) hook. For example, you can use the EditButton component from the @pankod/refine package to create a button that will redirect to the edit page of a particular post. You can use the resourceName property to specify the endpoint for the list view, and the recordItemId property to specify the ID of the post you want to edit.

import { EditButton } from "@pankod/refine";  
  
export const MyEditComponent = () => {  
 return <EditButton resourceName="categories" recordItemId="2" />;  
};

import { EditButton } from "@pankod/refine";  
  
export const MyEditComponent = () => {  
 return <EditButton resourceName="categories" recordItemId="2" />;  
};

Clicking the button will trigger the edit method of useNavigation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) and then redirect the app to /categories/edit/2. You can also use the EditButton component from the @pankod/refine-antd and @pankod/refine-mantine packages, which have the same properties as the EditButton component from the @pankod/refine package. I hope this helps! ----------------------

useNavigation | refine

useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.

kapa.ai•2y ago

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

continuing-cyan•2y ago

I try to add this code to the columns of my list view but it doesn't work :

        {
            field: "actions",
            headerName: translate("table.actions"),
            minWidth: 250,
            renderCell: function render(params) {
                return (
                    <>
                        <ShowButton hideText recordItemId={params.row.id} resource="users" />
                        <EditButton hideText recordItemId={params.row.id} resource="users" />
                    </>
                );
            }
        }

        {
            field: "actions",
            headerName: translate("table.actions"),
            minWidth: 250,
            renderCell: function render(params) {
                return (
                    <>
                        <ShowButton hideText recordItemId={params.row.id} resource="users" />
                        <EditButton hideText recordItemId={params.row.id} resource="users" />
                    </>
                );
            }
        }

it call the /admin/{id} endpoint instead of /users/{id}

genetic-orange•2y ago

Hi, you can give resource and id pop to useForm to edit other resource in any page

continuing-cyan•2y ago

Hi Alican thank you for your answer !! Should i add it like that ?

   <Edit
        resource="users"
        isLoading={formLoading}
        saveButtonProps={{onClick: handleSubmit(handleSubmitUsersEdit)}}

   <Edit
        resource="users"
        isLoading={formLoading}
        saveButtonProps={{onClick: handleSubmit(handleSubmitUsersEdit)}}

or add it here ?

   const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        control,
        formState: {errors}
    } = useForm<IUsers>();

   const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        control,
        formState: {errors}
    } = useForm<IUsers>();

genetic-orange•2y ago

like this

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "users",
        id: 1, 
    }
});

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "users",
        id: 1, 
    }
});

continuing-cyan•2y ago

when i try to edit a user, i have an api call to fetch current user data from same endpoint (from /admin/{id}, I've put record?.id as id value to get current user id

genetic-orange•2y ago

you can change reosurce to admin is this not work ? sorry i guess i don't quite understand

continuing-cyan•2y ago

the initial ressource is admin (the one that i put in <Refine/> component) and i would like to edit users that i fetch from admin endpoint in the user endpoint. To do that i need the currect id from admin endpoint to edit in user endpoint. (all admin user are in the users ressources) @alicanerdurmaz

genetic-orange•2y ago

BASE_URL = myUrl/api this will send request to myUrl/api/users/1

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "users",
        id: 1, 
    }
});

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "users",
        id: 1, 
    }
});

this will send request to myUrl/api/admin/1

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "admin",
        id: 1, 
    }
});

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "admin",
        id: 1, 
    }
});

this will send request to myUrl/api/admin/users/1

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "admin/users",
        id: 1, 
    }
});

useForm({
    refineCoreProps: {
        action: "edit", 
        resource: "admin/users",
        id: 1, 
    }
});

is this not work for your needs ?

continuing-cyan•2y ago

  const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        control,
        formState: {errors}
    } = useForm<IUsers>({
        refineCoreProps: {
            action: "edit",
            resource: "users",
            id: record?.id
        }
    });

  const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        control,
        formState: {errors}
    } = useForm<IUsers>({
        refineCoreProps: {
            action: "edit",
            resource: "users",
            id: record?.id
        }
    });

I've done that and it should redirect me to the following url : myUrl/api/users/{record?.id} but the url of the request that made refine is : myUrl/api/admins/{record?.id}

genetic-orange•2y ago

you can change redirect to show page. https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#redirect

continuing-cyan•2y ago

i find that in the doc but i need also to change the request url and the code that i find in the doc do not change the request url in my case i'll try to explicite my issue a bit more precisely

genetic-orange•2y ago

i guess i understand, you can use redirect:false and you can use onMutationSuccess to manually redirect any page