인프런 커뮤니티 질문&답변

reactQuery에대해서 graphql을 호출하는 과정에있어서 에매한 부분이 있는것같아 나름대로 정리를 해봤습니다... 혹시 제가 잘못 이해하고있는 부분이 있을까요!!??

 

1. graphql를통한 데이터 불러오기 흐름. (+next.js 서버사이드 렌더링 가정)

1) 서버사이드 렌더링에의해 불러오는 데이터를  hydrate를통해 클라이언트측 cache에 저장시킨다.

 

2) 최초접속시  useQuery를통해 데이터를 요청하지만, 우선은 당장 cache에 존재하는 데이터를 보여준다.

 

3) 이후 useQuery를 통해 데이터를 가져왔을떄 기존에 cache에 존재하는 데이터와 비교후, 바뀐부분만 교체시킨다.

 

4) 이후 새로고침이 발생했을떄  cache에서 데이터를 가져오게됨으로써 빠른 렌더링을 구현 할 수 있게된다.

 

 

2. graphql를통한 생성, 업데이트, 제거 흐름.

1) 우선 useMutation을통해 필요한 정보들을 fetcher를 태워 graphql요청을 보낸다. 

 

2) 이후 성공하게되면 client.setQueryData를통해 클라이언트측 cache에 접근하여 데이터를 업데이트 시킨다.

 

3) 이과정에서 QueryKeys.MESSAGES를 통해 클라이언트측 cache에 접근하여 데이터를 업데이트하게됨으로, 최초 useQuery를통해 불러온데이터가 변경된것과 동일함으로 useEffect의 dependency Array에 전달된 data.messages가 변경된것으로 인식하여, setMsgs가 호출된다.

 

4) 이과정에서 useQuery의 fetcher는 호출되지않는다.

 

 

3. 클라이언트측 cahce를 눈으로 확인할 수 있는 방법이있을까요?(단순히 개발자 도구에서의 애플리케이션탭의 cache부분에서는 확인이 안되는것같아 질문드립니다..!) 또한 이부분이 리덕스의 스토어 역할을 한다고 생각해도되는지 궁긍합니다!