THE DEVLOG

scribbly.

Next JS 치트 시트

2025.05.16 12:38:36

Supabase 클라이언트의 select() 사용법과 **Embedded Resource Syntax(중첩 쿼리)**에 대해 정리한 게시글이다.

1. Supabase 클라이언트의 select() 기본 사용법

Supabase는 내부적으로 PostgREST API를 사용하며, .from().select()를 통해 데이터를 조회한다.

기본 구조

const { data, error } = await supabase
  .from('posts')
  .select('*'); // 또는 'id, title'

메서드의미
from('테이블명')조회할 테이블 지정
select('필드명1, 필드명2')조회할 컬럼 지정
eq('컬럼', 값)조건 필터링
order('created_at', { ascending: false })정렬
limit(n)개수 제한

예시

const { data } = await supabase
  .from('posts')
  .select('id, title')
  .eq('author_id', 42)
  .order('created_at', { ascending: false });

posts 테이블에서 author_id = 42인 글을 최근 순으로 가져온다.

2. Embedded Resource Syntax (중첩 조회)

정의:

PostgreSQL의 Foreign Key 관계를 바탕으로, 관련된 다른 테이블의 필드를 한 번에 중첩 조회하는 문법.
REST인데 GraphQL처럼 JOIN 결과를 중첩 JSON으로 리턴받는다.

사용 조건

  • PostgreSQL의 foreign key 관계가 있어야 함
    (예: posts.author_id → users.id)

기본 예시

const { data } = await supabase
  .from('posts')
  .select('id, title, users(id, name)')

  • users(...): posts.author_idusers.id를 참조할 때 가능
  • 결과:
[
  {
    "id": 1,
    "title": "Hello",
    "users": {
      "id": 42,
      "name": "Jane"
    }
  }
]


3. Embedded Resource with alias (별칭 사용)

.select('id, title, author:users(id, name)')

  • author:users(...)
    → 응답 필드명을 author로 바꾸고, 실제 테이블은 users에서 가져옴

결과 예시:

{
  "id": 1,
  "title": "글 제목",
  "author": {
    "id": 1,
    "name": "홍길동"
  }
}


4. 1:N 또는 N:N 관계에서의 중첩 조회

예: posts ←→ tags (다대다 관계)

.select(`
  id,
  title,
  tags(name)
`)

결과:

{
  "id": 1,
  "title": "Supabase 배우기",
  "tags": [
    { "name": "supabase" },
    { "name": "postgres" }
  ]
}

5. 조합 예시: 여러 관계 중첩

const { data } = await supabase
  .from('posts')
  .select(`
    id,
    title,
    author:users(id, name),
    tags(name),
    comments(body, created_at, commenter:users(id, name))
  `);

가능하면 다음과 같은 구조가 된다:

{
  "id": 1,
  "title": "글",
  "author": { "id": 1, "name": "Jane" },
  "tags": [{ "name": "React" }, { "name": "Next.js" }],
  "comments": [
    {
      "body": "좋은 글이네요",
      "created_at": "2024-01-01",
      "commenter": { "id": 2, "name": "John" }
    }
  ]
}


요약 정리

문법설명
select('*')모든 필드 조회
select('id, title')특정 필드 조회
select('user(id, name)')관계 테이블 중첩 조회
select('author:users(id)')중첩 필드에 별칭 부여
select('comments(body, user(id))')다중 중첩도 가능 (GraphQL 느낌)