여러가지 쿼리방식, refetch문제점, ApolloState 직접 수정

8/6 

🧐 useApolloClient로 원하는 곳에서 쿼리하기 🧐

그동안 데이터를 쿼리해올 때, useQuery를 사용 했다.
그런데, 기존에 openapi를 사용하기 위해 axios를 사용했을 때를 기억하면,
axios는 useQuery와 다르게, 내가 원하는 곳에서 원하는 버튼을 클릭했을 때, api요청을 할 수 있었다.
하지만! useQuery는 이렇게 동작하지 않고, 페이지가 렌더링될 때 자동으로 쿼리가 요청됐다.
그렇다면, useQuery를 axios처럼 우리가 원하는 곳에서 api를 요청하기 위해선 어떻게 하면 좋을까?
이를 위해 사용했던 기능이 useApolloClient 👏👏
그렇다면, 왜 useQuery를 이용하여 페이지가 랜더링될 때 fetchUserLoggedIn 이라는 API를 자동으로 요청하지 않고, 
useApolloClient를 사용해 loginUser라는 API를 요청 후 fetchUserLoggedIn이라는 API를 곧바로 요청해야 하는걸까?
 = 페이지가 랜더링될 때 fetchUserLoggedIn을 요청해도, accessToken을 첨부하지 못한 상태이므로 쿼리에 실패하게 된다.
fetchUserLoggedIn이라는 API는 accessToken이라는 인증 정보를 가지고 
로그인된 유저의 이메일과 이름 등의 정보를 가져오는 API이기 때문이다.

😊 apolloCache 직접 수정하기 😊

기존에는 refetchQueries를 사용했었다.
이를 활용하면, 굉장히 간단히 기능을 만들 수 있었다.
하지만 refetch를 사용함으로써 발생하는 문제점이 있다.
목록(게시물 목록, 상품 목록 등)을 refetch하는 것이 대표적인 예.
목록은 데이터가 많기 때문에, 수많은 사람들이 한꺼번에 refetch 요청을 하게되면 불필요한 네트워크 비용이 많이 필요하게 된다.
이러한 문제를 제거하기 위해서, 목록의 경우에는 refetch보다는 Apollo의 데이터가 저장되는 cacheState를 직접 수정해 주었다.
이것을 네트워크 탭을 함께 열어놓고 보면, 추가적인 refetch api 요청이 백엔드로 가지 않는 것을 확인할 수 있다.

취업하게 되는 실무 환경에서는 이미 이러한 문화가 갖추어져있고 사용 되고 있을 것이다.
그래서 어떻게 하면 확장성, 유지보수성이 좋은 서비스를 만들지 생각하며 만들어야 한다. (면접시 중요하게 보는 요소)

 

페이지 전환

로그인을 누르면 로그인 창이 나온다

로그인을 하면

내가 정한 위치에 누구님 환영합니다~ 라고 나와야 하는데?

눈에 보이기 때문에 useQuery가 나간 것.
로그인을 하면 바껴야 되니까 refetch를 해야한다
엑세스토큰을 가지고 요청을 해야한다

저장을 한다. 왼쪽이 바뀌어서

엑세스토크인이 첨부된 채로 나간다

이렇게 쓰면 좋긴 한데 엑세스 첨부인이 안된 상태
그래서 useAoplloClient를 사용한다

여기에 들어가서 그 이후에 엑세스토큰이 된다.
페이지가 이동이 되면 이동된 페이지에서는 엑세스토큰이 있기때문에

첨부된 상태로 보낸다

첨부된 상태로 보내서 누구님 환영합니다~ 가 나온다

refetch 못들음. 그래서 useAoplloClient로 

받아올 수 있다

 

커서가 있는쪽에 이름을 짓는다

저장을 해두고 어떤 컴포넌트든 가져올 수 있다

cachestate를 수정해주셈~ 이라는 뜻

게시물 하나씩 삭제하기

캐쉬 직접 변경하는 방법 2개 추가

refetchQueries: [{query}]
리패치쿼리 데이터를 하나 수정하고 하나 받아올때는 괜찮은데 그 외는 필요하지 않음

이렇게 연결

기존에 있던거 가져와서

필터링

1개를 삭제했으니 9개를 받아오는 것
10개 있던게 9로 줄어듬

…prev = 기존에 10개 스프레드 시킴

원하는데로 안될수도 있다

똑같아야함

_id만 있으면 안된다
그래서

다 넣어야한다

writer, title, contents