Why some resources dont appear on sider?

Some resources dont appear on sider

8 Replies

Hi @internal_server_error_enjoyer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- There are a few reasons why some resources might not appear on the sider in refine: 1. Access Control: If you're using an access control provider, resources that the user doesn't have permission to access won't appear in the sider menu. This is mentioned in the Authorization documentation (https://refine.dev/docs/authorization/access-control-provider/#list-of-default-access-control-points). 2. Hidden Resources: You can explicitly hide resources from the sider menu by setting the meta.hide property to true in the resource definition. This is described in the FAQ documentation (https://refine.dev/docs/guides-concepts/faq/#how-to-hide-items-from-the-sider-component). 3. Missing list Property: Resources without a list property defined won't appear in the sider menu by default. This is because the sider typically shows links to list pages for resources. 4. Parent Resources: If you're using a multi-level menu structure with parent resources, make sure the parent resources are correctly defined and linked to their children using the parentName property. 5. Asynchronous Loading: If you're loading resources asynchronously, there might be a delay before they appear in the sider. If you're still experiencing issues with resources not appearing in the sider, you may want to check your resource definitions and access control settings. If the problem persists, it could be a bug, and you might want to consult the refine documentation or open an issue on their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@492429659154415657> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

afraid-scarlet•4mo ago

Hello @internal_server_error_enjoyer, we need more information to debug this issue. do you use access control ? what is your Refine resources looks like?

frail-apricot•4mo ago

Not sure if it's the same issue, but it seems to be related, we are experiencing something similar. We are not using access control (yet). We have opted for a different approach than the recommended, so we can have the routes and resources defined next to the pages. When we are on the default list view, we see 2 items in the sider, but if we click on the new one we just added, the first one disappears from the sider.

afraid-scarlet•4mo ago

Could you create a small reproducible example so I can debug it?

frail-apricot•4w ago

I have not managed to create a repro, but I think I know where the problem is, just not what it is. When console logging the useMenu hook in the first menu items list view, we see both our items, but doing the same in the second item list view only shows that second item. So since the themed sider uses the useMenu hook, I think that would be where the issue is. I'll try and dive a bit deeper and see if I can figure out why the useMenu hook is struggling. So, managed to figure out what the issue was. The first item we had added, was a route that needed an extra :id in it. When going to the second item, I'm guessing since that :id is no longer in the url, the sider doesn't recognize the item anymore. We have changed the structure a bit since we first ran into this issue, but we seem to be having a similar issue, that basically boils down to this: refine isn't good at handling nested routes and resources. Let me give the specific example of a new but very much related issue:

const UsersResource: ResourceProps = {
    name: 'users',
    list: '/users',
    show: '/users/show/:id',
    meta: {
      label: i18n.t('menuItem.label', { ns: 'users' }),
      icon: <GroupIcon />,
    },
  }

  const BookingsResource: ResourceProps = {
    name: 'bookings',
    list: 'users/:id/bookings',
    show: 'users/:id/bookings/show/:id',
    meta: {
      label: i18n.t('menuItem.label', { ns: 'bookings' }),
      icon: <CalendarMonthIcon />,
      parent: 'users',
      hide: params?.userId != null,
    },
  }

  const UsersRoute = (
    <Route path="users">
      <Route index element={<UsersList />} />
      <Route path="show/:id" element={<UsersShow />} />
      <Route path=":userId">
        <Route path="bookings">
          <Route index element={<BookingsList />} />
          <Route path="show/:id" element={<BookingsList />} />
        </Route>
      </Route>
    </Route>

const UsersResource: ResourceProps = {
    name: 'users',
    list: '/users',
    show: '/users/show/:id',
    meta: {
      label: i18n.t('menuItem.label', { ns: 'users' }),
      icon: <GroupIcon />,
    },
  }

  const BookingsResource: ResourceProps = {
    name: 'bookings',
    list: 'users/:id/bookings',
    show: 'users/:id/bookings/show/:id',
    meta: {
      label: i18n.t('menuItem.label', { ns: 'bookings' }),
      icon: <CalendarMonthIcon />,
      parent: 'users',
      hide: params?.userId != null,
    },
  }

  const UsersRoute = (
    <Route path="users">
      <Route index element={<UsersList />} />
      <Route path="show/:id" element={<UsersShow />} />
      <Route path=":userId">
        <Route path="bookings">
          <Route index element={<BookingsList />} />
          <Route path="show/:id" element={<BookingsList />} />
        </Route>
      </Route>
    </Route>

First, this structure makes sense because we have a user, and users can have bookings and we wanted that reflected in the sider, the url path and the api. First issue: when doing this we can't use the useList hook without manually defining the resource inside of the hook. Since we just call booking "booking", the normal useList would call /bookings, but we actually want it to call /users/:id/bookings, however refine doesn't inherit the dynamic value from the current route, so it would literally call it with ":id". Second issue: the child item in the sider shows when on the show user page, which is nice, but when you go to the bookings, it removes itself from the sider, which is a bit annoying. Third issue: going to a different resource, in our case clients resource. When going to the show page, the bookings show back up in the sider. And if you click on it, you inherit the client id, on a route that expects user id. Now I'm unsure how to handle this, but I guess this would now turn into a feature request: Have refine better handle nested routing for more dynamic pages.

frail-apricot•4w ago

And I imagine I'd have to setup my own sider menu and being aware of this: https://refine.dev/docs/core/hooks/utilities/use-menu/#hideonmissingparameter So I think I can fix my issues by making my own sider in combination with changing our dataprovider so it more dynamically can handle current route to infer :id. I do however hope that this behavior can be handled by refine, so I can do what is so nice about refine in general, focus on the content, not the setup.

useMenu | Refine

useMenu is used to get menu items derived from the resources. These items include a link to the dashboard page (if it exists) and links to the user-defined resources (passed as children to ``).

afraid-scarlet•3w ago

Hello again @JuicyBenjamin, Thank you for your detailed explanation. You pointed out some important areas where Refine might be missing features, and you are right. We will review these with our core team.

Why some resources dont appear on sider?

Did you find this page helpful?