Supabase API Migration Guide: Updating Your Frontend After Moving to Supabase

The Code Migration Challenge

Once your database is on Supabase, you need to update your application code to use the Supabase client instead of your previous provider's SDK. This guide covers every common pattern you'll encounter.

Setup: Installing the Supabase Client

npm install @supabase/supabase-js

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Pattern 1: Basic Data Queries

// SELECT * FROM posts WHERE published = true ORDER BY created_at DESC
const { data: posts, error } = await supabase
  .from('posts')
  .select('*')
  .eq('published', true)
  .order('created_at', { ascending: false })

// SELECT specific columns with JOIN
const { data } = await supabase
  .from('orders')
  .select('id, total, created_at, users(name, email)')
  .eq('status', 'pending')

// SELECT with complex filter
const { data } = await supabase
  .from('products')
  .select('*')
  .gte('price', 10)
  .lte('price', 100)
  .ilike('name', '%shirt%')
  .limit(20)

Pattern 2: Mutations (Insert, Update, Delete)

// INSERT
const { data, error } = await supabase
  .from('profiles')
  .insert({ name: 'Alice', email: 'alice@example.com' })
  .select()
  .single()

// UPDATE
const { error } = await supabase
  .from('posts')
  .update({ published: true })
  .eq('id', postId)

// UPSERT (insert or update on conflict)
const { data } = await supabase
  .from('settings')
  .upsert({ user_id: userId, theme: 'dark' }, { onConflict: 'user_id' })

// DELETE
const { error } = await supabase
  .from('comments')
  .delete()
  .eq('id', commentId)

Pattern 3: Authentication

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securepassword123'
})

// Sign in with email/password
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'securepassword123'
})

// Sign in with OAuth (Google, GitHub, etc.)
await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: window.location.origin }
})

// Sign out
await supabase.auth.signOut()

// Get current user
const { data: { user } } = await supabase.auth.getUser()

// Listen to auth state changes
supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)
})

Pattern 4: File Storage

// Upload file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.jpg`, file, {
    contentType: 'image/jpeg',
    upsert: true
  })

// Get public URL
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.jpg`)

// Download file
const { data, error } = await supabase.storage
  .from('documents')
  .download('private/report.pdf')

// Delete file
await supabase.storage
  .from('avatars')
  .remove([`${userId}/old-avatar.jpg`])

Pattern 5: Real-Time Subscriptions

// Subscribe to table changes
const channel = supabase
  .channel('db-changes')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'messages' },
    (payload) => {
      console.log('New message:', payload.new)
    }
  )
  .subscribe()

// Clean up on component unmount (React)
useEffect(() => {
  const channel = supabase.channel(...)
  return () => supabase.removeChannel(channel)
}, [])

Pattern 6: Calling Edge Functions

const { data, error } = await supabase.functions.invoke('send-email', {
  body: { to: 'user@example.com', subject: 'Hello' }
})

Need help updating your frontend after a Lovable Cloud migration? Our team handles both the database migration and full frontend code update.