Use Supabase with refine

Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.

Create a Supabase project

Go to database.new and create a new Supabase project.

When your project is up and running, go to the Table Editor, create a new table and insert some data.

Alternatively, you can run the following snippet in your project's SQL Editor. This will create a instruments table with some sample data.

1
2
3
4
5
6
7
8
9
10
11
12
13
-- Create the tablecreate table instruments (  id bigint primary key generated always as identity,  name text not null);-- Insert some sample data into the tableinsert into instruments (name)values  ('violin'),  ('viola'),  ('cello');alter table instruments enable row level security;

Make the data in your table publicly readable by adding an RLS policy:

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);

Create a refine app

Create a refine app using the create refine-app.

The refine-supabase preset adds @refinedev/supabase supplementary package that supports Supabase in a refine app. @refinedev/supabase out-of-the-box includes the Supabase dependency: supabase-js.

1
npm create refine-app@latest -- --preset refine-supabase my-app

Open your refine app in VS Code

You will develop your app, connect to the Supabase backend and run the refine app in VS Code.

1
2
cd my-appcode .

Start the app

Start the app, go to http://localhost:5173 in a browser, and you should be greeted with the refine Welcome page.

1
npm run dev

refine welcome page

Update `supabaseClient`

You now have to update the supabaseClient with the SUPABASE_URL and SUPABASE_KEY of your Supabase API. The supabaseClient is used in auth provider and data provider methods that allow the refine app to connect to your Supabase backend.

Project URL

Anon key

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createClient } from "@refinedev/supabase";const SUPABASE_URL = YOUR_SUPABASE_URL;const SUPABASE_KEY = YOUR_SUPABASE_KEYexport const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {  db: {    schema: "public",  },  auth: {    persistSession: true,  },});

Add instruments resource and pages

You have to then configure resources and define pages for instruments resource.

Use the following command to automatically add resources and generate code for pages for instruments using refine Inferencer.

This defines pages for list, create, show and edit actions inside the src/pages/instruments/ directory with <HeadlessInferencer /> component.

The <HeadlessInferencer /> component depends on @refinedev/react-table and @refinedev/react-hook-form packages. In order to avoid errors, you should install them as dependencies with npm install @refinedev/react-table @refinedev/react-hook-form.

The <HeadlessInferencer /> is a refine Inferencer component that automatically generates necessary code for the list, create, show and edit pages.

More on how the Inferencer works is available in the docs here.

1
npm run refine create-resource instruments

Add routes for instruments pages

Add routes for the list, create, show, and edit pages.

You should remove the index route for the Welcome page presented with the <Welcome /> component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Refine, WelcomePage } from "@refinedev/core";import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";import routerBindings, {  DocumentTitleHandler,  NavigateToResource,  UnsavedChangesNotifier,} from "@refinedev/react-router-v6";import { dataProvider, liveProvider } from "@refinedev/supabase";import { BrowserRouter, Route, Routes } from "react-router-dom";import "./App.css";import authProvider from "./authProvider";import { supabaseClient } from "./utility";import { InstrumentsCreate, InstrumentsEdit, InstrumentsList, InstrumentsShow } from "./pages/instruments";function App() {  return (    <BrowserRouter>      <RefineKbarProvider>        <Refine          dataProvider={dataProvider(supabaseClient)}          liveProvider={liveProvider(supabaseClient)}          authProvider={authProvider}          routerProvider={routerBindings}          options={{            syncWithLocation: true,            warnWhenUnsavedChanges: true,          }}          resources={[{            name: "instruments",            list: "/instruments",            create: "/instruments/create",            edit: "/instruments/edit/:id",            show: "/instruments/show/:id"          }]}>          <Routes>            <Route index              element={<NavigateToResource resource="instruments" />}            />            <Route path="/instruments">              <Route index element={<InstrumentsList />} />              <Route path="create" element={<InstrumentsCreate />} />              <Route path="edit/:id" element={<InstrumentsEdit />} />              <Route path="show/:id" element={<InstrumentsShow />} />            </Route>          </Routes>          <RefineKbar />          <UnsavedChangesNotifier />          <DocumentTitleHandler />        </Refine>      </RefineKbarProvider>    </BrowserRouter>  );}export default App;

View instruments pages

Now you should be able to see the instruments pages along the /instruments routes. You may now edit and add new instruments using the Inferencer generated UI.

The Inferencer auto-generated code gives you a good starting point on which to keep building your list, create, show and edit pages. They can be obtained by clicking the Show the auto-generated code buttons in their respective pages.