본문 바로가기

tanstack-query2

tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법 tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다. 상황 및 문제점먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다. tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다. 그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다. 예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이.. 2024. 8. 12.
[supabase] enabled / 나는 테이블 3개 조인이 필요한데... 문제 상황 즐겨 찾는 화장실 페이지에서 즐겨찾기 한 화장실의 리뷰 평점을 보여주는 작업을 진행했다. supabase에서 컬럼을 외래키로 걸면 자동으로 인식하고 조인하듯이 2개의 테이블에서 조회할 수 있는데, 여기서 문제가 발생했다. 일단 평점을 가져오기 위해서는 총 3개의 테이블이 필요했다. 1. 화장실 정보 테이블 : toilet_location 2. 즐겨 찾는 화장실 테이블 : bookmark 3. 리뷰 목록 데이터 테이블 : review_info supabase 공식 문서와 구글, 열심히 찾아다녔지만, 테이블 3개를 한 번에 조회하여 데이터를 가져오는 방법을 찾을 수 없었다.(내가 못 찾는 건가????/ 정말???) 튜터님께 도움을 요청해 enabled라는 옵션을 알게 됐다. 데이터 조회를 한 번의.. 2024. 3. 22.