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,

{
  name: "filterz",
  list: FilterzList,
  edit: FilterzEdit,
  create: FilterzCreate,
  show: FilterzShow
}

{
  name: "filterz",
  list: FilterzList,
  edit: FilterzEdit,
  create: FilterzCreate,
  show: FilterzShow
}

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,

{
  name: "group"
},
{
  parentName: "group",
  name: "filterz",
  list: FilterzList,
  edit: FilterzEdit,
  create: FilterzCreate,
  show: FilterzShow
}

{
  name: "group"
},
{
  parentName: "group",
  name: "filterz",
  list: FilterzList,
  edit: FilterzEdit,
  create: FilterzCreate,
  show: FilterzShow
}

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.