Supabase 클라이언트로 데이터베이스 조회하기

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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

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.