manual-pink•2y ago

Error creating `category` column in Chakra UI and Strapi v4 data provider

I'm having trouble creating a category column in Chakra UI and Strapi v4 data provider. I'm trying to create a PostList page to list all posts from the fake Strapi API "https://api.strapi-v4.refine.dev" after following these tutorials: https://refine.dev/docs/tutorials/chakra-ui-tutorial/ and https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi/. The code in src/pages/list.tsx and error returned in the browser are attached. Thank you for helping!

Your First App using Chakra UI | refine

Introduction

Building a CRUD app with Material UI and Strapi in React | refine

How to build CRUD admin panel with Material UI?

4 Replies

stuck-chocolate•2y ago

Hi @michmatics , If you are using the cell property when defining a column with react-table, you must return a valid value. In your case, some posts don’t have a category property, so you are getting an error. You can fix this by adding a try catch block like this:

{
    id: "category.id",
    header: "Category",
    enableColumnFilter: false,
    accessorKey: "category.id",
    cell: function render({getValue, table}) {
        try {
            const meta = table.otpions.meta as {
                categoriesData: GetManyResponse<ICategory>;
            };

            const category = meta.categoriesData?.data.find(
                (category) => category.id === getValue()
            );

            return category?.title ?? "Loading...";
        } catch (e) {
            return null;
        }
    }
}

{
    id: "category.id",
    header: "Category",
    enableColumnFilter: false,
    accessorKey: "category.id",
    cell: function render({getValue, table}) {
        try {
            const meta = table.otpions.meta as {
                categoriesData: GetManyResponse<ICategory>;
            };

            const category = meta.categoriesData?.data.find(
                (category) => category.id === getValue()
            );

            return category?.title ?? "Loading...";
        } catch (e) {
            return null;
        }
    }
}

manual-pink•2y ago

Many thanks @salihozdemir! But I keep getting the same error. I suspect the error is being generated from this part of the code:

const categoryIds = tableData?.data?.map((item) => item.category.id) ?? [];
    const { data: categoriesData } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

const categoryIds = tableData?.data?.map((item) => item.category.id) ?? [];
    const { data: categoriesData } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

Omer•2y ago

Hey @michmatics , Do all your items have a "category" property? Can you try this?

const categoryIds = tableData?.data?.map((item) => item?.category?.id) ?? [];

const categoryIds = tableData?.data?.map((item) => item?.category?.id) ?? [];

manual-pink•2y ago

Thanks, @Omer. I'll try this. But some of the items were created by someone else since it's an example API with dummy data.