Hey,

I have a resource call groups. i wish to make crud from my rest api any helps to how i can archieve this ?

2 Replies

kapa.ai•16mo ago

Hi @negro_237. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, you can achieve this by defining your groups resource in the resources prop of the <Refine> component. Here's a step-by-step guide: 1. First, you need to define your groups resource in the resources prop of the <Refine> component. The name property should be "groups", and the list, create, edit, and show properties should define the routes for these actions. Here's an example:

<Refine  
  dataProvider={dataProvider(API_URL)}  
  resources={[  
    {  
      name: "groups",  
      list: "/groups", 
      create: "/groups/create", 
      edit: "/groups/edit/:id", 
      show: "/groups/show/:id", 
    },  
  ]}  
/>

<Refine  
  dataProvider={dataProvider(API_URL)}  
  resources={[  
    {  
      name: "groups",  
      list: "/groups", 
      create: "/groups/create", 
      edit: "/groups/edit/:id", 
      show: "/groups/show/:id", 
    },  
  ]}  
/>

2. Then, you need to create the CRUD pages for your groups resource. You can use the create-resource command of the refine CLI to generate these pages:

npm run refine create-resource groups

npm run refine create-resource groups

3. Finally, you need to add the newly created CRUD pages to the resources property of the <Refine> component. Here's an example:

import { GroupList, GroupCreate, GroupEdit } from 'pages/groups';  

function App() {  
  return (  
    <BrowserRouter>  
      <Refine  
        ...  
        dataProvider={dataProvider(supabaseClient)}  
        resources={[  
          {  
            name: 'groups',  
            list: "/groups",  
            create: "/groups/create",  
            edit: "/groups/edit/:id",  
          },  
        ]}  
      >  
        <Routes>  
          <Route path="/groups" element={<GroupList />} />  
          <Route path="/groups/create" element={<GroupCreate />} />  
          <Route path="/groups/edit/:id" element={<GroupEdit />} />  
        </Routes>  
      </Refine>  
    </BrowserRouter>  
  );  
}

import { GroupList, GroupCreate, GroupEdit } from 'pages/groups';  

function App() {  
  return (  
    <BrowserRouter>  
      <Refine  
        ...  
        dataProvider={dataProvider(supabaseClient)}  
        resources={[  
          {  
            name: 'groups',  
            list: "/groups",  
            create: "/groups/create",  
            edit: "/groups/edit/:id",  
          },  
        ]}  
      >  
        <Routes>  
          <Route path="/groups" element={<GroupList />} />  
          <Route path="/groups/create" element={<GroupCreate />} />  
          <Route path="/groups/edit/:id" element={<GroupEdit />} />  
        </Routes>  
      </Refine>  
    </BrowserRouter>  
  );  
}

This will connect your CRUD pages with your REST API, allowing the pages to interact with the data from the API. For more information, you can refer to the following documentation pages: - Resources (https://refine.dev/docs/api-reference/core/components/refine-config/#resources) - Create-resource command (https://refine.dev/docs/packages/documentation/cli/) - Resource (https://refine.dev/docs/api-reference/general-concepts/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

Hey,

Did you find this page helpful?