[TIL] Day 69 Supabase Trigger, Realtime, 데이터 참조

2024.01.11 목

 

Supabase 트리거

Supabase의 auth의 user 테이블은 직접 수정을 할 수 없어서 명령어로만 가능하다.

어쩌면 SQL로 작성하는게 더 쉬울 수도 있다.

 

auth의 user 테이블에 값이 들어오면 자동으로 내가 만든 public의 users에 넣도록 만든다.

-- 트리거 함수 생성
CREATE OR REPLACE FUNCTION public.handle_new_auth_user()
RETURNS TRIGGER AS $$
BEGIN
  -- public.users 테이블에 새로운 행 추가
  INSERT INTO public.users (id, created_at)
  VALUES (NEW.id, now());

  RETURN NEW;
END;
$$ LANGUAGE plpgsql security definer;

-- 트리거 설정
CREATE TRIGGER add_user_to_public_users
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION public.handle_new_auth_user();

 

 

Supabase Realtime

최초 렌더시, Realtime 동작 시 둘 다 상태값에 영향을 주도록 realTimeTrigger를 생성

const { flirtingData } = receiveRequestData;
  const client = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL || '', process.env.NEXT_PUBLIC_SERVICE_KEY || '');

  const [flirtingList, setFlirtingList] = useState<FlirtingListType[] | null>(null);
  const [realTimeTrigger, setRealTimeTrigger] = useState<boolean>(false);

  const fetchFlirtingRequestData = async () => {
    const data = await getFlirtingRequestData();
    console.log('data', data);
    if (data) {
      setFlirtingList(data);
    }
  };

  useEffect(() => {
    const channelA: RealtimeChannel = client
      .channel('room1')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'flirting_list'
        },
        (payload) => {
          // console.log({ payload });
          setRealTimeTrigger(!realTimeTrigger);
        }
      )
      .subscribe();
    fetchFlirtingRequestData();
  }, [realTimeTrigger]);

 

 

 

Supabase 데이터 참조

 async function getRequestSenderData() {
    fetchFlirtingRequestData();
    const { data, error } = await supabase
    .from('custom_users')
    .select('name, avatar')
    .eq('uid', '9359219c-25ec-4722-9131-1bff830e2e02');
    // .eq('uid', 'flirting_list.sender_uid');
    // .in('uid', ['9359219c-25ec-4722-9131-1bff830e2e02', '16dc2297-debc-4c90-896c-f564fb7b1c7a']);
    // .contains
    console.log('데이터', data);
    console.error('에러:', error);
    return data;
  }

 

a테이블 시점에서

from : 참조할 상대쪽 가서가져와야할 테이블(=b테이블)

select : b테이블에서 가져오고 싶은 열이름 => 그 열에 해당하는 행(데이터)가 가져와진다

eq : 필터. 조건. 첫번째 인자는 b테이블의 기준점 키, 두번째 인자는 a테이블의 기준점 키

 

기본키, 외래키를 설정했는데 이렇게 직접 필터를 선언해서 값을 가져오는게 맞는 건지 모르겠다.

연결되어 있는 테이블이지만 기본키,외래키가 아닌 다른 값을 eq에 넣어서 접근이 가능했다.

그럼 왜 바인딩을 하는 것일까...?

바인딩을 하지 않은 테이블은 아예 접근이 안되는 것일까...?

그리고 데이터를 가져오더라도 사용해야 배열의 값이 2종류가 된다.

그렇다면 새로운 배열의 형태로 합쳐야할까..?

아니면 기존처럼 맵을 돌리고 eq에 넣을 값을 프롭스로 내려줘서 안쪽에서 해당하는 값만 1:1 통신을 해야할까

조금 더 작동 원리를 공부해야겠다.