How to perform a count of related entities in a grid?

[pinale]

in a <CategoryList> component i need a column that shows the number of related posts

i've tryied to use useMany<IPost> but this hook needs an ids collection that i can't get from the category list,

should i've to use another hook like useCustom?
Or is possible to override the useMany behaviour (with queryOptions) in order to instruct the hook to use something different as compared to a flat ids array

the structure of posts collection of https://api.fake-rest.refine.dev/posts has this shape:

{
    "id": 11,
    ...
    "category": {
      "id": "1"      //<--- this is the id to search for
    },
    ...
}

what i've tried, that is obviously wrong

export const CategoriesList: React.FC = () => {
    const { dataGridProps } = useDataGrid<ICategory>();

    const categoryIds = dataGridProps.rows.map((item) => item.id); 

    const { data: postsData, isLoading } = useMany<IPost>({
        resource: "posts",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds .length > 0,
        },
    });

could you suggest me some something? is there any example how to perform a count?

this is my repo with a draft: https://github.com/pinale/Refine/blob/master/refinemuiapp/src/pages/categories/list.tsx

[salihozdemir]

Hey @pinale,

I've created a StackBlitz fork for answer your question. Here is the link.

With this method, you send requests for each row render, but don't worry, the react query cache saves you.

[pinale]

thanks! @salihozdemir
just to know, compiler give me an error on the line const { data, isLoading } = useList({

so i putted // eslint-disable-next-line react-hooks/rules-of-hooks on the line before
is it safe to ignore this error?
React Hook \"useList\" is called in function \"render\" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word \"use\".

[salihozdemir]

Actually, It is not best practice but i have good news. I created a new solution and suitable for best practices :)

You can check out here.

[pinale]

you're a king 👑