[BaaS] Convex로 백엔드 연결하기

🧐 문제/목표 파악

사실 손수 백엔드를 만들어서 배포하는 게 늘 해오던 거라 속편하긴한데, Baas(서비스형 백엔드)도 한번 써보고 싶기도하고, 써보는 능력도 도 필요할 거 같아서 도전했다. Netlify로 클라이언트를 구축중이라 동일하게 연동이 잘되는 서비스로 Convex를 찾았다. 해당 서비스의 공식 문서에 따라 useQuery 훅으로 데이터를 불러올 수 있다고 해서 시도했는데 에러가 떴다.

에러 메시지가 말하는 바는 분명했다.

Hooks can only be called inside of the body of a function component.

 

그러니까 나는 지금 useEffect라는 훅 안에 useQuery라는 훅을 썼기 때문에 에러를 맞닥뜨린 것이다.

 

🎯 문제/목표 해결

 

 useQuery는 페이지를 랜더링할 때, 딱 처음에만 호출되어야 한다. 

내가 원하는 것은 그것인데, useEffect밖에서 쓰니, 다른 useEffect(1초마다 갱신하는)의 영향을 받아, useQuery도 1초마다 호출되어 에러가 발생했다.

즉, useQuery를 한번만 호출하는 정보를 얻던가, 그 대신 다른 메서드를 찾아야한다는 것.

그러다가 나는 Node.js에서는 리액트 훅을 안쓴다는 것을 떠올리고 해당 문서를 참고했다.

Node.js에서는 'convex/browser'의 ConvexHttpClient로 데이터를 fetch해 받아오는 것으로 이해되어 적용해보았다.

 

결과는 성공....!

 

깨달은 점
공식문서의 불친절함을 인정하고 그 안에서 나만의 창의력으로 문제를 바라보자