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
Hey @harisris! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
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.
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.
<@636120564561346571> kapa.ai is still learning and improving, please let us how it did by reacting below
like-goldOP•2y ago
I try to add this code to the columns of my list view but it doesn't work :
it call the
/admin/{id}
endpoint instead of /users/{id}
passive-yellow•2y ago
Hi, you can give
resource
and id
pop to useForm
to edit other resource in any pagelike-goldOP•2y ago
Hi Alican thank you for your answer !! Should i add it like that ? or add it here ?
passive-yellow•2y ago
like this
like-goldOP•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 idpassive-yellow•2y ago
you can change reosurce to
admin
is this not work ? sorry i guess i don't quite understandlike-goldOP•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)
@alicanerdurmazpassive-yellow•2y ago
BASE_URL =
myUrl/api
this will send request to myUrl/api/users/1
this will send request to myUrl/api/admin/1
this will send request to myUrl/api/admin/users/1
is this not work for your needs ?like-goldOP•2y ago
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}
passive-yellow•2y ago
you can change redirect to
show
page.
https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#redirectlike-goldOP•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
passive-yellow•2y ago
i guess i understand,
you can use
redirect:false
and you can use onMutationSuccess
to manually redirect any pagelike-goldOP•2y ago
actually i have an endpoint which is
myUrl/api/admin
wich only serves me in the list view. I have also an other endpoint which is myUrl/api/users
which i want to use in edit and view mode. When edit in the list view, i would like to edit or view the user the select users but on the myUrl/api/users
endpoint. (of course IDs are the same between the 2 endpoints and the users
endpoint contain all users who are in admins
endpoint). In other word in I need to change the resources depending on whether I am in view or edition view or if I am in list view.
I try code snippets you send before but that not work for me. Maybe i use it in a wrong way
@alicanerdurmaz is it what you understand from my previous explanations ?passive-yellow•2y ago
I'm not quire sure yet but i will read again when i have time
like-goldOP•2y ago
ok thank you and sorry to bother you 😅
passive-yellow•2y ago
is this not work for you ?
like-goldOP•2y ago
I tried but it doesn't change anything
passive-yellow•2y ago
no. probably it's my fault to not understand
like-goldOP•2y ago
maybe i implemented it wrong
where should i do it ? In list component or in edit component ? I think that it should be in list view but i don't have any useForm in my list component
here is my list component
passive-yellow•2y ago
Edit and Show buttons for page navigation.
if you wanna edit resource in list view. you can check
useEditableTable
https://refine.dev/docs/api-reference/antd/hooks/table/useEditableTable/
or you can open your form in modal.like-goldOP•2y ago
i don't want to edit in the list view i just want to specify the url it sould not use the usual url but an other. I found that in the doc but it doesn't work for me (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button/#resourcenameorroutename-). I thought that the modifification should be done in the list component but i don't have
useForm
in this component. So i do it in the edit component but it doesn't workEdit | refine
uses Material UI component. It uses the edit method from useNavigation
under the hood. It can be useful to redirect the app to the edit page route of resource.Hey @harisris ,
Can you check this doc? https://refine.dev/docs/faq/#how-can-i-request-an-api-with-nested-route
like-goldOP•2y ago
Hey @Omer nested-route are not appropriate for my case and i've try this code snippet but it doesn't work for me
i've put this code in my edit component. Should i do in an other component ?
Please share clearly what happened when you try the thing you want to do with me and the method we suggested. It should be a CodeSandbox or StackBlitz environment. Otherwise, we cannot help you. Thank you for your understanding.
like-goldOP•2y ago
i'll try but i don't know if i will block by cors policy the api
like-goldOP•2y ago
I've made the stackblitz but I'm blocked by the cors policy. But it will be easier to understand. (https://stackblitz.com/edit/react-ts-dbdb2s?file=admins/list.tsx)
In the
list
component (line 67 & 68) I specified the ressources as i found in the doc but it doesn't work for me. I also try to do it in the edit
in the useForm
as you send earlier, but it also do not work.
My problem is that actulally my api target this url https://api.localhost/api/admins/2ff1e2a5-2b24-44a2-a71d-edc4ede7b59e but i would like to change the url to https://api.localhost/api/users/2ff1e2a5-2b24-44a2-a71d-edc4ede7b59e because the admins
endpoint only serves me for the list component. For the edit and the show i need to use the users
endpoint. The ressource specified in the App component is admins
like-goldOP•2y ago
I hope i'm a bit clearer 😅
like-goldOP•2y ago
i'll try @Omer thank you
it said to me :
Type 'BaseKey | undefined' is not assignable to type 'BaseKey'. Â Â Type 'undefined' is not assignable to type 'BaseKey'.
Is it normal
you can try like this
like-goldOP•2y ago
it remove the error but i always have the same issue 😫
I understand that you are new to React and perhaps to programming in general, and I really appreciate that. Unfortunately, we cannot provide further assistance. You can try to solve your problems by reviewing Refine documentation and examples, or you can seek help from other community members. Thank you for your understanding. Lastly, you can review our real-world example where you may find answers to many of your questions. https://github.com/refinedev/real-world-example
GitHub
GitHub - refinedev/real-world-example: Exemplary real world applica...
Exemplary real world application built with refine - GitHub - refinedev/real-world-example: Exemplary real world application built with refine
like-goldOP•2y ago
If i understand right, the handleSubmitUsersEdit is used to change the data before submited to the api and id trigger on save button click? so why should do something in this function ??
@Omer I don't know if you really understand my issue but my goal is to have a ressource for the list (which i specified in the App component admins) and an other ressources for the edit and the view (users).
the list have to target this endpoint https://api.localhost/api/admins (it actually works) and the edit and the view have to target https://api.localhost/api/users/id. How can I do that ? Because when i click on edit button in my list component, it fetch data from https://api.localhost/api/admins
flat-fuchsia•2y ago
Hey @haribo_mushi , you can use
useOne
hook to get the data you need and use it.
https://refine.dev/docs/api-reference/core/hooks/data/useOne/
Please go through our documentation, it will help you a lot.useOne | refine
useOne is an extended version of TanStack Query's useQuery. It supports all the features of useQuery and adds some extra features.
like-goldOP•2y ago
Finally i solved my issue like that
in my
admin/list.tsx
and in my App.tsx i've change the ressource from admins to users and it work perfectly