0Pricing
React Native Academy · Ders

Supabase İstemcisiyle Veritabanını Sorgulama

Bir Postgres tablosundaki satırları seçmek, eklemek, güncellemek ve silmek için Supabase istemcisini kullanın, eq ve gte ile filtreler uygulayın ve Satır Düzeyi Güvenlik politikalarını yönetin.

Supabase İstemcisiyle Veritabanını Sorgulama, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Supabase İstemcisiyle Veritabanını Sorgulama” dersi ücretsiz mi?

Evet — “Supabase İstemcisiyle Veritabanını Sorgulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.

“Supabase İstemcisiyle Veritabanını Sorgulama” dersinde ne öğreneceğim?

Bir Postgres tablosundaki satırları seçmek, eklemek, güncellemek ve silmek için Supabase istemcisini kullanın, eq ve gte ile filtreler uygulayın ve Satır Düzeyi Güvenlik politikalarını yönetin. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Native Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Supabase İstemcisiyle Veritabanını Sorgulama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. React Native'de Supabase İstemcisini Kurma
  2. E-posta ve OAuth Kimlik Doğrulaması
  3. Supabase İstemcisiyle Veritabanını Sorgulama
  4. Gerçek Zamanlı Abonelikler
← React Native Academy Sayfasına Dön