😎 Things I Learned
✓ 기능은 백엔드에서
직접 배운건 아니지만, 클론 코딩을 하면서 모든 기능들은 백엔드에 구현이 되어있고 프론트는 가져와서 띄우기만 하는 식으로 진행이 되고있다. 프론트에서 할 수도 있는 일이지만 백엔드에서 구현하니까 더 기능 구현 자체가 더 쉽고 코드도 깔끔하게 분리되는 것 같다.
✓ useQuery, useMutation의 사용법
내가 원하는 데이터를 Query에 기재한 후 GraphQL 요청을 하면 데이터를 받아올 수 있다. 내가 골라서 가져오기 때문에 딱 필요한 데이터만 깔끔하게 받을 수 있었다. 내가 원하는 항목이 너무 많을 경우 일일이 다 써야되는 불편함도 있었다. useMutation은 Query와 마찬가지로 내가 수정하고 싶은 데이터를 Mutation에 기재한 후 GraphQL 요청을 하면 DB를 수정할 수 있다. 옵션들이 굉장히 많아서 다양한 작업들을 할 수 있었다.
✓ RefetchQueries로 업데이트
Mutation 실행 후, 변경된 데이터를 반영하고 싶은 경우 백엔드에 에러가 없으면 query를 다시 호출하는 방식으로 프론트를 업데이트한다.
🤔 Things To Remember
✓ props의 기본값 할당
props에 값을 직접 할당할 수 있다. 만약, 해당 이름의 props가 내려오지 않는다면 기본값으로 설정된다.
✓ RefetchQueries의 장단점
Apollo가 data를 fetch한 후 바뀐 부분만 업데이트하지만, query 전체를 refetch하기 때문에 좋은 방법은 아니다. query가 크고 실시간 처리가 필요한 곳이면 적합하지 않다. 반대로, query가 작거나 prototype으로 금방 구현해야하는 상황에는 적합하다.
✓ useMutation의 loading
loading은 Mutation이 완료되지 않았으면 true를 갖는다. 그래서, 버튼을 두 번 눌러 요청이 두 번 가게 하는 등의 버그를 방지할 수 있다.
🤓 Things To Do
✓ useQuery, useMutation 다시 써보면서 익숙해지기
✓ Feed 마무리
✓ TIL 꾸준히 쓰기
