wise-white•17mo ago

Refine beginner: How to use supabase queries? In Inferencer Templates

Hello everyone, I am new to React, Refine and NextJS. I trying to build a website with my supabase database. But I do not understand how queries work on the newest Refine version. I have a "edit" page. The edit page works, but it doesnt insert the values from the database into the textfields. I always get this error message: "relation "public.cases" does not exist Error (status code: 42)" I know that it has to do something with the queryResult tag. But I dont see any option to change the resource/source. My relation is called "case" not "cases"... How do I change the relation the query is using?? Thanks! 😄

4 Replies

kapa.ai•17mo ago

Hey @l0zz1! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- Hello! Based on the information extracts provided, I can guide you on how to use Supabase as a data provider in a Refine app. However, I don't have enough information about the specific error you're encountering. To use Supabase as a data provider in Refine, you need to set up the data provider in your App.tsx file like this:

import { dataProvider } from '@refinedev/supabase';  
import { supabaseClient } from 'utility';  

// ... other imports

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

export default App;

import { dataProvider } from '@refinedev/supabase';  
import { supabaseClient } from 'utility';  

// ... other imports

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

export default App;

In this example, the resources property is used to define the connection between CRUD pages and the Supabase API. You should replace the name property with the correct table name from your Supabase database (in your case, it should be 'case' instead of 'posts'). For more information on using Supabase with Refine, you can refer to the Supabase Data Provider documentation (https://refine.dev/docs/advanced-tutorials/data-provider/supabase). If you still encounter issues, I recommend checking the Refine documentation (https://refine.dev/docs) and examples (https://refine.dev/docs/examples) for more guidance. ----------------------

Overview | refine

What is refine?

Examples | refine

kapa.ai•17mo ago

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

wise-white•17mo ago

Changing the name property in app.tsx did the trick! thx!