supabase
nullable 옵션
- nullable이 켜져있으면 필수적인 컬럼이 아니게 된다.(값을 안넣어도 된다는것. 타입이 null도 포함되게 됨)
로딩, 에러시 처리
-
data fetching시 처리 : react에서 suspense라는 기능을 제공한다. 이를 최상위 컴포넌트로 감싸면 이 안에서 데이터 fetching이 일어날때 감지해서 suspense관련 동작을 실행한다.(물론 세팅을 해줘야 하지만, react query를 사용중일땐 쿼리가 알아서 세팅해놓음)
-
에러발생시 화면 처리 : 이 역시 react에서 error boundary라는 기능을 제공한다. 마찬가지로 최상위 컴포넌트를 감싸주면 에러발생시 화면처리를 도와준다.
트러블 슈팅
supabase db fetching시 에러처리
- 수파베이스는 따로 에러를 발생시키지않고 데이터를 undefined를 반환한다. 그렇기에 따로 error를 컨트롤 해줘야 한다.
const { data, error } = await supabase.select() ~~~
if(error) { // 이부분에서 에러를 처리
throw error;
}
return data;모달에서의 useQuery 사용
-
queryClientProvider를 최상위 컴포넌트로 보통 감싸게 된다. 그래서 그 아래에 있는 컴포넌트들에서 useClient로 쿼리 기능들을 사용할수 있다.
하지만 portal로 만든 모달은 말그대로 다른 요소에서 띄우는 것이기 때문에 portal모달 내부에서 useQuery관련 동작을 사용할 수 없다. 그래서"Error: No QueryClient set, use QueryClientProvider to set one"라는 에러를 마주하게 되었다. -
해결 : 보통 모달을 portal로 써주는 이유는 부모 컴포넌트에 종속되어 생기는 css, z-index등의 문제 때문에 따로 빼주지만 내가 만들어 쓰는 모달은 그런 문제가 이미 해결되어 있어 굳이 portal을 쓸 필요가 없었기 때문에 그냥 portal을 쓰는 코드를 삭제하니 정상적으로 useQuery를 사용할 수 있었다.
개발자라고싶다