future-harlequin•2y ago

Unable to obtain categories from refine strapi demo endpoint using refine, Strapi and chakraUI

Hello, I’m building a simple CRUD application using refine with a strapi-v4-provider and Chakra-UI as design library. I’m using the refine’s strapi v4 endpoint for testing purposes. I was able to access the endpoint for posts and render it on the table (for chakra UI) but unable to access the categories endpoint in a bid to relate the data from categories to the posts.

10 Replies

refine-support-bot•2y ago

Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊

rare-sapphire•2y ago

Hi @gitarackur, we will debug strapi-v4 example this example works as expected. https://refine.dev/docs/examples/data-provider/strapi-v4/ do you get any error ? if you reproduce the issue on any platform, i will happy to debug

future-harlequin•2y ago

Ok @alicanerdurmaz , I saw this example on the DOCS, but this is An Ant-design implementation I took a look at this one https://refine.dev/docs/tutorial/adding-crud-pages/chakra-ui/index/#handling-relationships This works but it’s a different endpoint (a product endpoint with categories) I tried replicating it and adjusted it to suit the case for the post endpoints but the categories wasn’t returning.

1. Adding List Page | refine

In Unit 2.4, we created the CRUD pages automatically with Inferencer. In this unit, we will create the CRUD pages manually using the codes generated by Inferencer. So, you can customize the pages as you wish.

rare-sapphire•2y ago

actually UI packages have nothing to do with dataProvider 🤔 in strapi-v4, you can populate relations like this https://refine.dev/docs/advanced-tutorials/data-provider/strapi-v4/#relations-population this example for @pankod/refine-simple-rest dataProvider

future-harlequin•2y ago

Ya. @alicanerdurmaz , the useTable() hook where the population will take place is that of ant-design

rare-sapphire•2y ago

all data hooks accepts metaData.

import { useTable } from "@pankod/refine-react-table";

useTable({
    refineCoreProps: {
      metaData: {
        populate: ["category"],
      },
    },
});

import { useTable } from "@pankod/refine-react-table";

useTable({
    refineCoreProps: {
      metaData: {
        populate: ["category"],
      },
    },
});

future-harlequin•2y ago

Thanks 🔥🔥 @alicanerdurmaz , this is exactly what I needed. This is because, the previous example didn’t show the refineCoreProps property so I tried adding the metadata property without enclosing it in the refineCoreProps property so typescript was throwing an error on that.

rare-sapphire•2y ago

i'm sorry for confusion :/

future-harlequin•2y ago

No worries.. it was no confusion 👍 Thanks a lot 🔥 @alicanerdurmaz

rare-sapphire•2y ago

your welcome, i'm glad to help 🚀