🧨 문제 상황

차트를 구현하고나서 문제가 없는줄 알았는데, 다른 판매자로 로그인해서 상품등록을 진행하려고 했더니 상품등록 0개인 판매자에게 매출현황과 주문건수 차트가 나타났다.

이전에 확인했던 차트와 똑같은 모양으로.. 😓

알고 보니 차트 데이터가 주문 데이터 전체를 나타내고 있었다.

매출을 계산하기 위해 판매자가 등록한 상품 중 주문 데이터가 있는 경우만 가져와야 했다. 그래서 product는 seller_id와 같은지만 비교하고 product의 다른 데이터는 필요없어서 차트를 생성하는데는 문제가 없는 줄 알았다. 하지만 해당 쿼리가 제대로 작동을 안해서 모든 주문 데이터를 리턴하고 있었다.

const { status, data, error } = await supabase
    .from("order_item")
    .select(`price, product(), order(created_at)`)
    .eq("product.seller_id", userId!)
    .gte("order.created_at", sixMonthsAgo.toISOString());

위와 같이 데이터를 불러왔고, product의 결과가 null로 나타났다.

사실 product가 null으로 나타나는 사실을 알고 있었으나 데이터가 문제 없이 불러와지길래 문제가 없는 줄 알았다.

알고보니 eq 구문이 제대로 실행이 안됐고 결과적으로 전체 주문 데이터가 불러와져서 차트가 만들어진 것.

(제대로 된 데이터인지 체크를 했어야 했는데 다음에는 잊지XX ⭐️)

🔒 원인

select 구문 내에서 product()를 사용했기 때문

JavaScript: Fetch data | Supabase Docs

Querying referenced table with inner join 탭에서 참조하는 테이블의 키를 통해 비교할 때는 !inner를 사용한다는 것

---

🖌️ product()와 product!inner()의 차이점이 무엇일까?

둘의 큰 차이는 INNER JOIN과 LEFT JOIN의 동작 방식에 있다.

Supabase에서는 select 구문에서 특정 관계에 대해 !inner를 붙이는 것은 INNER JOIN을 강제하는 반면, !inner를 사용하지 않으면 기본적으로 LEFT JOIN이 적용된다.

product()

• 기본적으로 LEFT JOIN을 사용한다. order_item에 대응되는 product가 없는 경우에도 order_item 데이터는 반환되며, 이 경우 product 필드는 null로 나타난다.
• 즉, product가 존재하지 않더라도 order_item 데이터를 확인해야 할 때 유용
• 이 방식은 order_item은 존재하지만 해당 product 데이터가 없을 가능성이 있는 경우, 즉 product와의 연결이 필수가 아닐 때 적합하다.

product!inner()

• INNER JOIN을 사용하므로 product와 order_item 간에 일치하는 항목이 있는 경우에만 결과가 반환된다.
• 즉, product가 null이 될 가능성이 없으며, 로그인한 유저가 상품의 판매자로 일치하는 경우만 데이터를 반환한다.
• 만약 order_item에 대응되는 product가 없으면 해당 order_item은 결과에서 제외된다.
• 이 방법은 product와 order_item이 반드시 연결되어 있는 경우만 결과로 보여야할 때 적합하다.

---

하지만 나의 경우 대응되는 product가 있다.

gpt에게 해당 부분에 대해 물어봤을 때 참조 관계나 데이터가 실제로 존재하지 않아서일수도 있다고 했으나 참조관계도 잘 설정했고, 데이터가 없는 것도 아니기 때문에 그나마 문제 원인일 가능성이 높은 답변은 다음과 같다.

Supabase 쿼리에서 종종 조인을 처리하는 방식이 혼동될 수 있는데, 특정 쿼리 옵션이 누락되면 예상치 못한 결과가 나올 수 있습니다. 이 경우, select 구문에서 inner_join을 강제로 지정하는 것이 문제가 해결되는 경우가 있습니다.

또한, 스택오버플로우에서 나와 같은 문제를 물어본 사람이 있었는데 답변이 다음과 같았다.

!inner allows you to filter the root table results by applying filters to the suitable.
→ !inner를 사용하면 루트 테이블 결과를 필터링할 수 있도록 한다.

Supabase join and nested select | stackoverflow

🛎️ 종합하자면 Supabase 쿼리에서 INNER_JOIN을 강제 지정하지 않았을 때 기대한 결과가 나타나지 않는 문제가 발생할 수 있어, !inner를 설정해 루트 테이블의 결과에 올바른 필터링을 적용해 기대한 데이터가 반환될 수 있는 것 같다.

🔓 해결방법

inner 키워드를 통해 해결할 수 있다.

const { status, data, error } = await supabase
    .from("order_item")
    .select(
      `
    price,
    order(created_at),
    product!inner()
  `
    )
    .eq("product.seller_id", userId!)
    .gte("order.created_at", sixMonthsAgo.toISOString());