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!
No description
No description
4 Replies
xenial-black
xenial-black2y 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;
}
}
}
extended-salmon
extended-salmon2y 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
Omer2y 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) ?? [];
extended-salmon
extended-salmon2y 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.