How to use Supabase with React?

 

Step 1: Set Up Supabase Account and Project

 

To get started with using Supabase, you'll first need to create an account and a new project.

1. Go to the Supabase website and sign up for an account.
2. Once you are logged in, click on "New Project" to create a new project.
3. Fill out the necessary details such as the project name, organization, and choose a database password.
4. Wait for the project setup to complete. After it's created, you'll have access to your unique Supabase URL and API Keys, which you will use in your React application.

 

Step 2: Initialize React Application

 

If you haven't already, you'll need to create a new React application. If you have node installed, you can quickly bootstrap a React app using Create React App.

npx create-react-app my-supabase-app
cd my-supabase-app

 

Step 3: Install Supabase Client Library

 

You need to install the Supabase JavaScript client library to interact with the Supabase backend from your React application.

npm install @supabase/supabase-js

 

Step 4: Set Up Supabase Client

 

Create a new file for setting up the Supabase client. You will initialize the Supabase client with your Supabase URL and API key.

Create a supabaseClient.js file:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co'; // replace with your Supabase project URL
const supabaseAnonKey = 'your-anon-key'; // replace with your Supabase anon key

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Replace 'your-project-ref' and 'your-anon-key' with the actual values from your Supabase dashboard.

 

Step 5: Fetch Data from Supabase

 

To interact with your Supabase database, you will use the Supabase client you set up earlier. Here's how you can fetch data from a table:

import React, { useEffect, useState } from 'react';
import { supabase } from './supabaseClient';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    const { data, error } = await supabase.from('your_table_name').select('*');
    if (error) console.log('Error fetching data:', error);
    else setData(data);
  }

  return (
    <div className="App">
      <h1>Supabase Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

Replace 'your_table_name' with the actual table name you want to fetch data from in your Supabase project.

 

Step 6: Insert Data into Supabase

 

To insert data into your Supabase table, you'll need to use the insert method. Here's an example of how you can implement it:

async function insertData() {
  const { data, error } = await supabase
    .from('your_table_name')
    .insert([
      { column_name: 'value', other_column: 'other\_value' }
    ]);

  if (error) console.log('Error inserting data:', error);
  else console.log('Data inserted:', data);
}

Call insertData() when you need to perform an insertion, such as in an event handler.

 

Step 7: Update Existing Data

 

To update existing records, you can use the update method:

async function updateData() {
  const { data, error } = await supabase
    .from('your_table_name')
    .update({ column_name: 'new_value' })
    .eq('id', 1); // specifying which row to update based on a condition

  if (error) console.log('Error updating data:', error);
  else console.log('Data updated:', data);
}

This code updates the row where id is 1. Replace column_name and new_value with your table's field and new value.

 

Step 8: Delete Data from Supabase

 

To delete records, use the delete method:

async function deleteData() {
  const { data, error } = await supabase
    .from('your_table_name')
    .delete()
    .eq('id', 1); // specifying which row to delete based on a condition

  if (error) console.log('Error deleting data:', error);
  else console.log('Data deleted:', data);
}

This deletes the row where id is 1. Adjust to your needs by changing the condition.

 

Step 9: Enable Realtime Updates (Optional)

 

Supabase supports listening to changes in real-time. Here's an example of how to set this up:

useEffect(() => {
  const subscription = supabase
    .from('your_table_name')
    .on('\*', payload => {
      console.log('Change received!', payload);
      fetchData(); // re-fetch data after any change
    })
    .subscribe();

  return () => {
    supabase.removeSubscription(subscription);
  };
}, []);

Ensure to replace 'your_table_name' appropriately.

 

Conclusion

 

You have set up a React application and integrated it with Supabase for performing CRUD operations. You can expand these examples to suit your needs and build more complex applications by leveraging Supabase's real-time and authentication features.