Recoil의 상태관리를 활용한 초기값 지켜내기

Question

안녕하세요! 오랜만이네요.
요점부터 말씀드리자면, Recoil에서 default 값을 api로 받아온 데이터를 연산하여 나온 값을 default로 깔고 싶습니다.

현재 프로젝트에서는 client state를 Recoil에서 Server State를 React Query로 관리하는데, Recoil에서 selector로 데이터를 활용하지않고, React Query에서 산출된 값을 활용하여 그 값을 recoil의 default value로 활용하고 싶습니다.

그렇게 해야지 처음 페이지가 로드되거나, 다시 리프레쉬되더라도 제가 정한 default 값이 UI에 잘 적용이 될 것 같습니다.

코드는 회사 비밀 로직이 좀 들어가서 공개가 힘들 것 같네요. 죄송합니다 :(

김재성 · Accepted Answer

React Query 옵션 중에 onSuccess 가 있는데, 거기서 recoil 상태를 체크하시고, 비어있는 경우에만 setRecoilState로 업데이트해주시면 어떨까요? 코드가 있으면 더 좋을 거 같긴 해서, 회사 코드를 공개하시기 어렵다면 같은 상황을 표현하는 간소화된 코드를 주셔도 좋을 것 같아요.

onSuccess 파라미터에 관한 자세한 내용은 https://tanstack.com/query/v3/docs/react/reference/useQuery 을 참고해주세요.

한편, React Query 가 이미 캐시로서 기능을 함에도 불구하고, Recoil 을 추가로 사용하시는 이유가 뭘까요? 만약 localStorage 등을 이용해서 영속화(make-persistent)하시려는 게 목적이라면, React Query v4 이상을 사용 중이시라는 가정 하에 (v3에서는 experimental feature 상태입니다) https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient 을 활용하실 수 있습니다.