continuing-cyan
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
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
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
kapa.ai•2y ago
<@636120564561346571> kapa.ai is still learning and improving, please let us how it did by reacting below
continuing-cyan
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
genetic-orange•2y ago
Hi, you can give resource and id pop to useForm to edit other resource in any page
continuing-cyan
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
genetic-orange•2y ago
like this
useForm({
refineCoreProps: {
action: "edit",
resource: "users",
id: 1,
}
});
useForm({
refineCoreProps: {
action: "edit",
resource: "users",
id: 1,
}
});
continuing-cyan
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
genetic-orange•2y ago
you can change reosurce to admin is this not work ? sorry i guess i don't quite understand
continuing-cyan
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
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
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
genetic-orange•2y ago
continuing-cyan
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
genetic-orange•2y ago
i guess i understand, you can use redirect:false and you can use onMutationSuccess to manually redirect any page