Multi Level Menu - Edit on Resource only works on top level?
Within the 'resources' prop of the 'Refine' component in App.tsx. I have the following resource defined,
and able to interact with the list, edit, create, show, views. The edit and show prepopulate with values of the record.
In those components, the 'refineCoreProps.resource' prop of the data hooks is set to 'filterz'.
When I nest the resource such as,
The List view works as expected, but when triggering the edit view the form is blank, and when triggering the show view the loader hangs.
What could possibly be the issue?
3 Replies
stuck-chocolate•2y ago
Hey @UsererOfName, this looks like a buggy behavior 🤔 The issue is, when you pass
resource
property to data hooks and if its different from the active one (from the route), you also need to pass id
too.
But in your case, looks like you use the current resource and therefore you can just remove the resource
property from the hook 🤔 Did you had a specific case requires you to put resource
in the hook?
Of course, you actually use the current active resource in the page but there's a small difference for the data hooks 😅 When you nest the resource inside group
, you get group/filterz
as the active resource and this gets the filterz
resource matching by the route of the resource (which is the expected behavior).
But since you're passing filterz
and the active resource is group/filterz
refine think those are different and also required id
to proceed.
id
is required for edge cases like when you are in posts
resource edit page like posts/edit/15
and you want to edit the category of this post by having a useForm
with resource: categories
. If we don't require id
and use the current id, we should send a request for categories/15
and it will be wrong for because we probably want to wait for posts/15
to be resolved and get the category
ID and send the request with it. Therefore, we do a quick check if the resource
is custom in the data hooks (sent from the props) then id
must be custom as well.
But I think your case is a real issue since the resources are same in name
but since the equality check is made by the route
it fails to recognize the active resource.
I'm still wondering if there's a reason for you to specify the resource
in the data hooks since you're using the active one by the route? 🤔ratty-blush•2y ago
Thanks for the response; you guys are awesome! I just tried the following scenarios,
1) I manually copied the ID from the URL and pasted it into the source-code ('resource' and 'id' defined on 'refineCoreProps')...
2) omit the ('resource' and 'id' defined on 'refineCoreProps'), and make sure the 'name' of the 'resource' in the 'refine' component is correct.
Both worked out.
What lead up to this request, was the PM wanted to nest things in a menu. So I nested the resources (names were different), and defined the name of the resource within the CRUD components. List worked so thought it was all good. Then later on discovered the forms not loading.
3) Is there a hook to fetch the id of the current route?
stuck-chocolate•2y ago
Yes, we have
useResource
from the @pankod/refine-core
(https://refine.dev/docs/api-reference/core/hooks/resource/useResource/#return-value)
It's returning an object including id
inferred from the URL.