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.

Set up a Supabase project with sample data

Create a new project in the Supabase Dashboard.

After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard. Use the following SQL statement to create a countries table with some sample data.

SQL_EDITOR


_10 -- Create the table
_10 CREATE TABLE countries (
_10   id SERIAL PRIMARY KEY,
_10   name VARCHAR(255) NOT NULL
_10 );
_10 -- Insert some sample data into the table
_10 INSERT INTO countries (name) VALUES ('United States');
_10 INSERT INTO countries (name) VALUES ('Canada');
_10 INSERT INTO countries (name) VALUES ('Mexico');

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.

Terminal


_10npm 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.

Terminal


_10cd my-app
_10code .

Start the app

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

Terminal


_10npm 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

src/utility/supabaseClient.ts


_13import { createClient } from "@refinedev/supabase";
_13
_13const SUPABASE_URL = YOUR_SUPABASE_URL;
_13const SUPABASE_KEY = YOUR_SUPABASE_KEY
_13
_13export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
_13  db: {
_13    schema: "public",
_13  },
_13  auth: {
_13    persistSession: true,
_13  },
_13});

Add countries resource and pages

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

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

This defines pages for list, create, show and edit actions inside the src/pages/countries/ 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.

Terminal


_10npm run refine create-resource countries

Add routes for countries 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.

src/App.tsx


_56import { Refine, WelcomePage } from "@refinedev/core";
_56import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
_56import routerBindings, {
_56  DocumentTitleHandler,
_56  NavigateToResource,
_56  UnsavedChangesNotifier,
_56} from "@refinedev/react-router-v6";
_56import { dataProvider, liveProvider } from "@refinedev/supabase";
_56import { BrowserRouter, Route, Routes } from "react-router-dom";
_56
_56import "./App.css";
_56import authProvider from "./authProvider";
_56import { supabaseClient } from "./utility";
_56import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries";
_56
_56function App() {
_56  return (
_56    <BrowserRouter>
_56      <RefineKbarProvider>
_56        <Refine
_56          dataProvider={dataProvider(supabaseClient)}
_56          liveProvider={liveProvider(supabaseClient)}
_56          authProvider={authProvider}
_56          routerProvider={routerBindings}
_56          options={{
_56            syncWithLocation: true,
_56            warnWhenUnsavedChanges: true,
_56          }}
_56          resources={[{
_56            name: "countries",
_56            list: "/countries",
_56            create: "/countries/create",
_56            edit: "/countries/edit/:id",
_56            show: "/countries/show/:id"
_56          }]}>
_56          <Routes>
_56            <Route index
_56              element={<NavigateToResource resource="countries" />}
_56            />
_56            <Route path="/countries">
_56              <Route index element={<CountriesList />} />
_56              <Route path="create" element={<CountriesCreate />} />
_56              <Route path="edit/:id" element={<CountriesEdit />} />
_56              <Route path="show/:id" element={<CountriesShow />} />
_56            </Route>
_56          </Routes>
_56          <RefineKbar />
_56          <UnsavedChangesNotifier />
_56          <DocumentTitleHandler />
_56        </Refine>
_56      </RefineKbarProvider>
_56    </BrowserRouter>
_56  );
_56}
_56
_56export default App;

View countries pages

Now you should be able to see the countries pages along the /countries routes. You may now edit and add new countries 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.

refine List Page