0Pricing
React Native Academy · Lesson

Querying the Database with the Supabase Client

Use the Supabase client to select, insert, update, and delete rows from a Postgres table, apply filters with eq and gte, and handle Row Level Security policies.

Querying the Database with the Supabase Client is a free React Native Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Supabase Query Builder

The Supabase JS client exposes a query builder that wraps the PostgREST API, letting you build SQL-like queries in JavaScript. You start every query with supabase.from('table_name') and chain methods like .select(), .insert(), .update(), and .delete().

All queries return a Promise that resolves to { data, error }. Always check error before using data — if the query fails, data will be null.

const { data, error } = await supabase
  .from('posts')
  .select('*');

if (error) {
  console.error(error.message);
} else {
  console.log(data); // Array of post objects
}

Selecting Specific Columns

Instead of fetching all columns with select('*'), you can specify only the columns you need. This reduces data transfer and is especially important on mobile networks where bandwidth is limited.

You can also select columns from related tables using embedded relationships. Supabase infers the join from your foreign key definitions, so select('title, author:profiles(username)') performs a join and nests the profile data inside each post object.

// Select specific columns
const { data } = await supabase
  .from('posts')
  .select('id, title, created_at');

// Select with a join
const { data: postsWithAuthor } = await supabase
  .from('posts')
  .select('title, content, author:profiles(username, avatar_url)');

// Each item in postsWithAuthor looks like:
// { title: 'Hello', content: '...', author: { username: 'alice', avatar_url: '...' } }

Filtering Rows with eq and Other Filters

The query builder provides a rich set of filter methods that map directly to SQL WHERE clauses. The most common are .eq(column, value) for exact equality, .neq for not-equal, .gt and .lt for comparisons, and .ilike for case-insensitive text search.

You can chain multiple filters — they are combined with AND by default. To use OR logic, use the .or() method.

// Exact match
const { data } = await supabase
  .from('posts')
  .select('*')
  .eq('user_id', userId);

// Greater than a date
const { data: recent } = await supabase
  .from('posts')
  .select('*')
  .gt('created_at', '2024-01-01');

// Case-insensitive search
const { data: results } = await supabase
  .from('posts')
  .select('*')
  .ilike('title', '%react native%');

Ordering, Limiting, and Pagination

Use .order(column, { ascending: false }) to sort results, .limit(n) to cap the number of rows returned, and .range(from, to) for cursor-based pagination.

Pagination is essential for mobile lists. A common pattern is to fetch 20 items at a time and load more when the user reaches the end of the list (using FlatList's onEndReached callback).

const PAGE_SIZE = 20;

async function fetchPosts(page: number) {
  const from = page * PAGE_SIZE;
  const to = from + PAGE_SIZE - 1;

  const { data, error } = await supabase
    .from('posts')
    .select('id, title, created_at')
    .order('created_at', { ascending: false })
    .range(from, to);

  return data ?? [];
}

Inserting Rows

To add a new record, use .insert() and pass an object or an array of objects. Supabase inserts the rows and returns the inserted data if you chain .select() after the insert.

You do not need to provide columns with database defaults (like id or created_at) — Postgres fills them in. For columns that reference auth.uid() through RLS policies, it is good practice to set the user_id explicitly to the current user's ID.

async function createPost(title: string, content: string, userId: string) {
  const { data, error } = await supabase
    .from('posts')
    .insert({ title, content, user_id: userId })
    .select()
    .single(); // returns a single object instead of an array

  if (error) {
    console.error('Insert error:', error.message);
    return null;
  }

  return data; // The newly created post row
}

Updating Rows

Use .update() chained with a filter to modify specific rows. Without a filter, .update() would attempt to update every row in the table — a dangerous operation that Supabase blocks by default for safety.

Always combine .update() with a filter like .eq('id', postId) to target exactly the row you want to change. Chain .select().single() to receive the updated row in the response.

async function updatePost(postId: string, newTitle: string) {
  const { data, error } = await supabase
    .from('posts')
    .update({ title: newTitle, updated_at: new Date().toISOString() })
    .eq('id', postId)
    .select()
    .single();

  if (error) {
    console.error('Update error:', error.message);
    return null;
  }

  return data; // Updated post
}

Deleting Rows

The .delete() method removes rows that match the filter. Like .update(), it requires a filter — you cannot delete all rows without explicitly using a condition like .neq('id', '').

To implement a soft delete (hiding items without removing them from the database), add an is_deleted boolean column and use .update({ is_deleted: true }) instead of .delete(). Filter queries to exclude soft-deleted rows with .eq('is_deleted', false).

// Hard delete
async function deletePost(postId: string) {
  const { error } = await supabase
    .from('posts')
    .delete()
    .eq('id', postId);

  if (error) {
    console.error('Delete error:', error.message);
  }
}

// Soft delete
async function softDeletePost(postId: string) {
  const { error } = await supabase
    .from('posts')
    .update({ is_deleted: true })
    .eq('id', postId);
}

Using Supabase in useEffect

The most common pattern in React Native is to fetch data inside a useEffect hook and store it in state. Create an async function inside the effect, call it immediately, and clean up any ongoing subscriptions in the return function.

Track loading and error state alongside the data so your UI can show an ActivityIndicator while the request is in flight and an error message if it fails.

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

export function usePostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchPosts() {
      const { data, error } = await supabase
        .from('posts')
        .select('*')
        .order('created_at', { ascending: false });

      if (error) setError(error.message);
      else setPosts(data ?? []);
      setLoading(false);
    }

    fetchPosts();
  }, []);

  return { posts, loading, error };
}

RLS and User-Scoped Queries

With Row Level Security enabled, you do not need to filter by user_id in every query — the database policy handles it. When an authenticated user calls supabase.from('posts').select('*'), Supabase automatically applies the RLS policy and returns only that user's rows.

This means your queries stay clean and simple, and the security boundary is enforced at the database level rather than relying on client-side filtering, which could be bypassed.

// With RLS policy: USING (auth.uid() = user_id)
// This query returns ONLY the current user's posts automatically
const { data: myPosts } = await supabase
  .from('posts')
  .select('*')
  .order('created_at', { ascending: false });

// No need to add .eq('user_id', userId) — RLS handles it
// If you were to query without being authenticated,
// RLS would return zero rows

Upsert: Insert or Update

The .upsert() method combines INSERT and UPDATE: if the row's primary key already exists, it updates the row; otherwise it inserts a new one. This is useful for profile syncing where you want to create a profile on first sign-in and update it on subsequent calls.

Pass { onConflict: 'id' } to tell Supabase which column to check for conflicts. The ignoreDuplicates option (when set to true) skips the row silently instead of updating it.

async function upsertProfile(userId: string, username: string) {
  const { error } = await supabase
    .from('profiles')
    .upsert(
      { id: userId, username, updated_at: new Date().toISOString() },
      { onConflict: 'id' }
    );

  if (error) {
    console.error('Upsert error:', error.message);
  }
}

Counting Rows Efficiently

To get a row count without fetching all data, pass { count: 'exact', head: true } to .select(). The head: true option tells PostgREST to return only headers, not the actual rows, making this query extremely fast even on large tables.

The count is available on the count property of the returned object rather than data. Use this for displaying total item counts in badges or list headers.

const { count, error } = await supabase
  .from('posts')
  .select('*', { count: 'exact', head: true })
  .eq('user_id', userId);

console.log('Total posts:', count); // e.g. 42

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: how to use the Supabase query builder for SELECT, INSERT, UPDATE, and DELETE, how Row Level Security automatically scopes queries to the authenticated user, and how to paginate and filter results efficiently. Next up we explore real-time subscriptions to receive live data updates from Supabase.

Frequently asked questions

Is the “Querying the Database with the Supabase Client” lesson free?

Yes — the full text of “Querying the Database with the Supabase Client” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “Querying the Database with the Supabase Client”?

Use the Supabase client to select, insert, update, and delete rows from a Postgres table, apply filters with eq and gte, and handle Row Level Security policies. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Querying the Database with the Supabase Client” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Supabase Client in React Native
  2. Email and OAuth Authentication
  3. Querying the Database with the Supabase Client
  4. Real-Time Subscriptions
← Back to React Native Academy