Refine•13mo ago

Inferencer

I have a supabase database with about 15 tables. Can refine help me auto create CRUD pages? The only example I have seen is the default Post samples but I have not seen any example/tutorial that creates CRUD pages from custom tables.

kapa.ai•12/8/24, 2:22 AM

Hi @Chi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•12/8/24, 2:23 AM

----------------------
Yes, refine can definitely help you auto-create CRUD pages for your custom Supabase tables. Refine provides a powerful feature called Inferencer that can automatically generate CRUD pages based on your API responses, including those from custom Supabase tables.

Here's how you can use Inferencer to create CRUD pages for your custom tables:

First, make sure you have set up your Supabase client and data provider correctly in your refine app, as described in the Supabase Data Provider documentation (https://refine.dev/docs/data/packages/supabase/#adding-crud-pages).
You can use the refine create-resourcerefine create-resource command to automatically generate CRUD pages for your resources. For example:

   npm run refine create-resource your-table-name

   npm run refine create-resource your-table-name

This command will create a new folder inside

pages

pages

with the name of your table, and populate it with files for list, create, edit, and show operations Adding CRUD Actions and Authentication (https://refine.dev/blog/refine-pixels-3/).

Refine will use the Inferencer to generate the initial code for these pages based on the structure of your Supabase table. The Inferencer analyzes the API responses to infer the field types and relationships Github Issue: Simplified, Automated and Consistent Forms (https://github.com/refinedev/refine/issues/6444).
You can then customize these auto-generated pages as needed. The Inferencer provides a "Show the auto-generated code" button on the page, allowing you to get the generated code and further modify it Building a React Admin Panel with Refine and daisyUI (https://refine.dev/blog/daisy-ui-react-admin-panel/#product-pages).
For more complex scenarios, you can use the Inferencer components directly in your code. For example, if you're using Mantine UI:

kapa.ai•12/8/24, 2:23 AM

   import { MantineInferencer } from "@refinedev/inferencer/mantine";

   <Route
     index
     element={<MantineInferencer />}
   />

   import { MantineInferencer } from "@refinedev/inferencer/mantine";

   <Route
     index
     element={<MantineInferencer />}
   />

Similar Inferencer components are available for other UI frameworks supported by refine How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/#using-the-refine-mantine-inferencer).

Remember to add your custom tables as resources in the
```
<Refine>
```
```
<Refine>
```
component in your
```
App.tsx
```
```
App.tsx
```
file Adding CRUD Actions and Authentication (https://refine.dev/blog/refine-pixels-3/).

This approach allows you to quickly set up CRUD operations for all your Supabase tables, saving you time and effort in creating these pages manually. You can then customize the generated pages to fit your specific needs.

For more detailed information and examples, I recommend checking out the refine documentation (https://refine.dev/docs/) and examples (https://refine.dev/examples/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/8/24, 2:23 AM

@1207908652661481502 Kapa.ai is still learning and improving, please let me know how I did by reacting below.