flat-fuchsia•2mo ago

Nested resources under same resources

I try to use nested resources, more precisely i need to have multiple resources under one. But when i go to the list of thenested resource, if i use useParsed, it don't find the resource. Here is my example of resource : }, { name: "groups", list: "/groups", create: "/groups/create", edit: "/groups/edit/:id", show: "/groups/show/:id", meta: { canDelete: true, }, }, { name: "sub-group", list: "/groups/:id/sub-group", create: "/groups/:id/sub-group/create", edit: "/groups/:id/sub-group/edit/:id", show: "/groups/:id/sub-group/show/:id", meta: { parent: "groups", }, },

23 Replies

kapa.ai•2mo ago

Hi @UmadGen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle nested resources in refine, you need to ensure that your resource definitions and hooks are correctly set up to recognize and handle the nested routes. Based on the information provided, it looks like you have a good start, but there are a few things to consider to make sure everything works smoothly. Resource Definitions Your resource definitions look mostly correct, but you need to ensure that the meta properties are correctly set up to handle nested resources. Here is your example with a slight adjustment to ensure clarity:

{
  name: "groups",
  list: "/groups",
  create: "/groups/create",
  edit: "/groups/edit/:id",
  show: "/groups/show/:id",
  meta: {
    canDelete: true,
  },
},
{
  name: "sub-group",
  list: "/groups/:groupId/sub-group",
  create: "/groups/:groupId/sub-group/create",
  edit: "/groups/:groupId/sub-group/edit/:subGroupId",
  show: "/groups/:groupId/sub-group/show/:subGroupId",
  meta: {
    parent: "groups",
  },
},

{
  name: "groups",
  list: "/groups",
  create: "/groups/create",
  edit: "/groups/edit/:id",
  show: "/groups/show/:id",
  meta: {
    canDelete: true,
  },
},
{
  name: "sub-group",
  list: "/groups/:groupId/sub-group",
  create: "/groups/:groupId/sub-group/create",
  edit: "/groups/:groupId/sub-group/edit/:subGroupId",
  show: "/groups/:groupId/sub-group/show/:subGroupId",
  meta: {
    parent: "groups",
  },
},

Using useParsed Hook To handle dynamic parameters in your nested routes, you can use the useParsed hook. This hook helps you parse the URL and extract parameters. Here is an example of how you can use it:

import { useParsed } from "@pankod/refine-core";

const { params } = useParsed();
const groupId = params.groupId;
const subGroupId = params.subGroupId;

import { useParsed } from "@pankod/refine-core";

const { params } = useParsed();
const groupId = params.groupId;
const subGroupId = params.subGroupId;

Example with useTable and useForm When using hooks like useTable and useForm, you need to specify the resource property to ensure they are aware of the nested resource path. Here is an example:

import { useTable, useForm } from "@pankod/refine-antd";

const { tableProps } = useTable({
    resource: `groups/${groupId}/sub-group`,
});

const { formProps } = useForm({
    resource: `groups/${groupId}/sub-group`,
});

import { useTable, useForm } from "@pankod/refine-antd";

const { tableProps } = useTable({
    resource: `groups/${groupId}/sub-group`,
});

const { formProps } = useForm({
    resource: `groups/${groupId}/sub-group`,
});

Breadcrumbs To handle breadcrumbs for nested resources, you can define them in your resource definitions. Here is an example:

import { useBreadcrumb } from "@pankod/refine-core";

const breadcrumbs = useBreadcrumb({
    resource: "sub-group",
    action: "list",
});

console.log(breadcrumbs);

import { useBreadcrumb } from "@pankod/refine-core";

const breadcrumbs = useBreadcrumb({
    resource: "sub-group",
    action: "list",
});

console.log(breadcrumbs);

Additional Resources For more detailed information, you can refer to the following documentation links: - Defining Nested Routes with Multiple Parameters (https://refine.dev/docs/guides-concepts/multi-tenancy/#configuring-multi-tenant-routes) - Using meta to Provide Route Parameters (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/show-button/#meta) - Using useParsed Hook (https://refine.dev/docs/routing/hooks/use-parsed/#params) By following these steps, you should be able to handle nested resources effectively in your refine application. If you encounter any specific issues, feel free to open a new issue or refer to the refine documentation for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@282981290020438016> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•2mo ago

@kapa.ai In the list of group, i have to put a button in a cell to redirect on the list page sub group with the id of the group

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add a button in the list of groups that redirects to the list page of sub-groups with the ID of the group, you can use the useNavigation hook from refine to handle the redirection. Here is how you can achieve this: 1. Import Necessary Components and Hooks: Make sure to import the necessary components and hooks from refine and your UI library. 2. Define the Columns with the Redirect Button: Add a column to your table that includes a button for redirection. Use the useNavigation hook to handle the redirection logic. Here is an example of how you can implement this:

import React from "react";
import { useTable, useNavigation } from "@pankod/refine-core";
import { Table, Button } from "@pankod/refine-antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default GroupList;

import React from "react";
import { useTable, useNavigation } from "@pankod/refine-core";
import { Table, Button } from "@pankod/refine-antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default GroupList;

Explanation: 1. Import Statements: - useTable is used to fetch and manage the table data. - useNavigation is used to handle navigation within the app. - Table and Button are UI components from Ant Design. 2. Table Configuration: - tableProps is obtained from useTable to manage the table's data and state. - columns array defines the structure of the table, including the new "Actions" column with a button. 3. Button for Redirection: - The render function in the "Actions" column creates a button for each row. - The onClick handler of the button uses the push function from useNavigation to redirect to the sub-group list page, passing the group ID in the URL. By following this approach, you can add a button in the list of groups that redirects to the sub-group list page with the appropriate group ID. For more details, you can refer to the refine documentation: - useTable Hook (https://refine.dev/docs/core/hooks/useTable/) - useNavigation Hook (https://refine.dev/docs/core/hooks/useNavigation/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@282981290020438016> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•2mo ago

@kapa.ai But why useParsed params are always undefined

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the useParsed hook's parameters are always returning undefined, it could be due to a few reasons related to how the URL is structured and how the hook is being used. Here are some steps to troubleshoot and ensure that useParsed works correctly: Ensure Correct URL Structure Make sure that the URL structure matches the expected pattern defined in your resource configuration. For example, if you have a nested resource like /groups/:groupId/sub-group, ensure that the URL you are navigating to follows this pattern. Correct Usage of useParsed Ensure that you are using the useParsed hook correctly in your component. Here is an example of how to use it:

import { useParsed } from "@refinedev/core";

const MyComponent = () => {
    const { params } = useParsed();

    console.log(params); // This should log the parsed parameters from the URL

    return (
        <div>
            <p>Group ID: {params.groupId}</p>
            <p>Sub-Group ID: {params.subGroupId}</p>
        </div>
    );
};

import { useParsed } from "@refinedev/core";

const MyComponent = () => {
    const { params } = useParsed();

    console.log(params); // This should log the parsed parameters from the URL

    return (
        <div>
            <p>Group ID: {params.groupId}</p>
            <p>Sub-Group ID: {params.subGroupId}</p>
        </div>
    );
};

Example with Button Redirection Here is an example of how to use useParsed in conjunction with a button that redirects to a nested resource:

import React from "react";
import { useTable, useNavigation, useParsed } from "@refinedev/core";
import { Table, Button } from "@refinedev/antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();
    const { params } = useParsed();
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

const SubGroupList = () => {
    const { params } = useParsed();

    console.log(params); // Ensure this logs the correct parameters

    return (
        <div>
            <h1>Sub-Groups for Group ID: {params.groupId}</h1>
            {/* Render sub-group list here */}
        </div>
    );
};

export default GroupList;

import React from "react";
import { useTable, useNavigation, useParsed } from "@refinedev/core";
import { Table, Button } from "@refinedev/antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();
    const { params } = useParsed();
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

const SubGroupList = () => {
    const { params } = useParsed();

    console.log(params); // Ensure this logs the correct parameters

    return (
        <div>
            <h1>Sub-Groups for Group ID: {params.groupId}</h1>
            {/* Render sub-group list here */}
        </div>
    );
};

export default GroupList;

Verify URL Parameters Ensure that the URL you are navigating to includes the necessary parameters. For example, navigating to /groups/1/sub-group should correctly parse groupId as 1. Additional Resources For more detailed information, you can refer to the following documentation links: - useParsed Hook Documentation (https://refine.dev/docs/routing/hooks/use-parsed/) - Defining Nested Routes with Multiple Parameters (https://refine.dev/docs/guides-concepts/multi-tenancy/#configuring-multi-tenant-routes) By following these steps, you should be able to troubleshoot and resolve the issue of useParsed parameters returning undefined. If the problem persists, ensure that your route definitions and URL structures are correctly aligned. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@282981290020438016> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•2mo ago

@kapa.ai Now i want to add an EditButton to edit a subgroup : { name: "sub-group", list: "/groups/:id/sub-group", create: "/groups/:id/sub-group/create", edit: "/groups/:id/sub-group/edit/:id", show: "/groups/:id/sub-group/show/:id", meta: { parent: "groups", },

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add an EditButton to edit a subgroup, you can follow these steps. The EditButton component from refine can be used to handle the redirection to the edit page of a subgroup. Here is how you can do it: Step-by-Step Guide 1. Import Necessary Components: Make sure to import the EditButton component from refine and any other necessary components. 2. Add the EditButton to the SubGroup List: Define a column in your table that includes the EditButton for each subgroup. Example Code Here is an example of how you can implement this:

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

Explanation 1. Import Statements: - useTable is used to fetch and manage the table data. - EditButton is used to create a button that redirects to the edit page of the subgroup. - Table is a UI component from Ant Design. 2. Table Configuration: - tableProps is obtained from useTable to manage the table's data and state. - columns array defines the structure of the table, including the new "Actions" column with the EditButton. 3. EditButton for Redirection: - The render function in the "Actions" column creates an EditButton for each row. - The recordItemId prop of the EditButton is set to the id of the subgroup, which ensures that the button redirects to the correct edit page. Additional Resources For more detailed information, you can refer to the following documentation links: - EditButton Component Documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/edit-button/) - useTable Hook Documentation (https://refine.dev/docs/core/hooks/useTable/) By following this approach, you can add an EditButton to the list of subgroups, allowing users to easily navigate to the edit page for each subgroup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@282981290020438016> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•2mo ago

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add an EditButton to edit a subgroup in your nested resource setup, you can follow these steps. The EditButton component from refine can be used to handle the redirection to the edit page of a subgroup. Here is how you can do it: Step-by-Step Guide 1. Import Necessary Components: Make sure to import the EditButton component from refine and any other necessary components. 2. Add the EditButton to the SubGroup List: Define a column in your table that includes the EditButton for each subgroup. Example Code Here is an example of how you can implement this:

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

kapa.ai•2mo ago

<@282981290020438016> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•2mo ago

@kapa.ai it's not working because the url for edition use 2 params : /groups/:id/sub-group/edit/:id