코딩을 잘하고 싶은 코린이 동토니

주요 변경점useQuery1. 컨벤션의 변화기존 : queryOptions에 queryKey와 queryFn이 포함되지 않았음const { data: paymentPromotions, isSuccess } = useQuery(PaymentPromotionsKey.all(),fetchPaymentPromotions,)변경 : queryOptions에 모들 property 추가const { data: paymentPromotions, isSuccess } = useQuery({queryKey: PaymentPromotionsKey.all(),queryFn: fetchPaymentPromotions,})2. options의 변화(많은 변화가 있지만 제일 많이 사용하는 위주로 정리)cacheTime (삭제) =..

1. data 캐싱 여부에 따른 initial status- cached = true - status === 'success'- cached = false - status === 'loading'2. loading status- 캐싱된 데이터가 없다면 항상 true- 데이터를 호출 하고 나서야 false로 변경 (호출 이후 status = loading => 'success' | 'error')- react-query에서의 loading의 의미는 데이터를 불러오는 중이 아닌 아직 데이터가 없는 상태3. fetchStatus- 기본 값 'idle' (쿼리가 아무런 동작도 하지 않는 상태)- query 실행시 'fetching' 으로 상태 변경4. enabled의 고찰- useQuery 혹은 useQueri..

React-Query와 Next.js를 연결해보자 최근 회사에서 Next의 SSR을 극대화 시키는 방법으로 React-query의 initial data기능을 사용하기 시작했다. 우선 react-query의 initial data에 대해 먼저 알아보면 특정 쿼리가 client에서 데이터를 요청하기 전에 처음부터 가지고 있을 데이터를 미리 설정해두고 뿌려주는 기능이다 먼저 React-query의 공식문서 예시를 한번 살펴보자 function Todos() { const result = useQuery(['todos'], () => fetch('/todos'), { initialData: initialTodos, }) } 생김새는 기존의 useQuery와 똑같고 단지 마지막에 initialData라는 옵션에..

회사에 들어온 후 React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때 신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점..