inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

GraphQL 통신 기능 구현

reactQuery + graphql 흐름 질문.

해결된 질문

346

노강표

작성한 질문수 44

0

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부분에서는 확인이 안되는것같아 질문드립니다..!) 또한 이부분이 리덕스의 스토어 역할을 한다고 생각해도되는지 궁긍합니다!

 

rest-api react graphql

답변 1

0

정재남

1. 2. 모두 정확합니다.

3. https://react-query.tanstack.com/devtools#_top

리덕스 스토어가 맡던 역할 중 데이터 송수신과 관련한 기능은 전부 가져왔다고 봐도 무방할 듯 해요.

질문있습니다 !

0

134

2

sass 오류

0

174

1

does not match

0

164

2

프로젝트 배포

0

299

1

코드 똑같이 쳤는데 scss 적용이 안돼요 ㅠㅠ

0

748

1

scss 스타일 적용

0

478

2

yarn run client시 에러는 안 나는데 호스트가 열리질 않습니다 ㅠㅠ

0

430

1

무한 스크롤 관련 질문 드립니다.

1

513

2

props 를 넘겨줄 때 함수를 그대로 넘겨줄 때와 화살표 함수로 감싸서 넘겨줄 때의 차이가 궁금합니다 :)

0

454

1

getInitialProps 과 getServerSideProps에 대해서 질문드립니다!

0

1144

1

node-sass를 했을 때 에러가 발생합니다.

0

377

1

[소스 다운로드 안됩니다]

0

323

1

rendered HTML error 관련

2

2187

2

닉네임 부분이 잘못되어 있는 것 같습니다.

0

448

2

Typescript 질문드려요!

0

331

1

error 관련하여

1

289

1

질문이 있습니다!.

0

278

1

질문이 있습니다!

0

486

1

수정된 내용까지 확인했는데 에러가 납니다 ㅠ

1

303

2

React Hydration Error 가 나는 이유가 무엇일까요 ?;;

0

631

1

useRef를 선호하시는 이유가 궁금합니다!

1

794

1

react-query 4.0.0 버전에선 에러가 납니다

0

668

1

gql 백틱 안에 색깔 입혀지는 확장프로그램이 어떤건지 알 수 있을까요?

2

685

1

typeScript에 대한 질문을 어디다가 올려야할지 몰라서 여기다가 남깁니다!

0

303

1