helpful-purple•10mo ago

Show child list

I am trying to list child items on a show page but the list is using the parent resource instead of the child. How can I show 2 resources on 1 page?

3 Replies

kapa.ai•10mo ago

Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can use multiple resources on a single page by using the resource prop of the <List> component. By default, the <List> component reads the resource information from the route. However, if you want to use a custom resource for the <List> component, you can use the resource prop and specify the name of the resource you want to use. Here's an example of how you can use the resource prop to display a custom resource:

import { List } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="posts">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="posts">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

In this example, the <List> component is using the "posts" resource instead of the default resource from the route. You can replace "posts" with the name of your child resource. If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component. For more information, refer to the identifier section of the <Refine/> component documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#identifier). Please note that the import statement (import { List } from "@refinedev/antd";) may vary depending on the UI library you are using. For example, if you are using Mantine, the import statement would be import { List } from "@refinedev/mantine";. Sources: - Ant Design List Component (https://refine.dev/docs/api-reference/antd/components/basic-views/list/) - Mantine List Component (https://refine.dev/docs/api-reference/mantine/components/basic-views/list/) - Material-UI List Component (https://refine.dev/docs/api-reference/mui/components/basic-views/list/) - Chakra UI List Component (https://refine.dev/docs/api-reference/chakra-ui/components/basic-views/list/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

helpful-purple•10mo ago

For anyone else looking for a solution, this is what I found to work.

interface RecipeListProps extends IResourceComponentsProps {
    parentId?: number;
}

export const RecipeList: React.FC<RecipeListProps> = ( parentId ) => {

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            setFilters,
            filters,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        refineCoreProps: {
            resource: "recipeItem",
        },
        columns,
    });

    React.useEffect(() => {
        if (parentId) {
            setFilters([
                {
                    field: "recipeId",
                    operator: "eq",
                    value: parentId,
                },
            ]);
        }
    }, [filters]);

    return (
        <List resource="recipeItem">

interface RecipeListProps extends IResourceComponentsProps {
    parentId?: number;
}

export const RecipeList: React.FC<RecipeListProps> = ( parentId ) => {

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            setFilters,
            filters,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        refineCoreProps: {
            resource: "recipeItem",
        },
        columns,
    });

    React.useEffect(() => {
        if (parentId) {
            setFilters([
                {
                    field: "recipeId",
                    operator: "eq",
                    value: parentId,
                },
            ]);
        }
    }, [filters]);

    return (
        <List resource="recipeItem">