- 홈 리스트와 게시물 상세 정보를 확인하고, 뒤로 가기를 하거나 앞으로 가기를 할 시에 'data'를 initiallize 하기 전에 access할 수 없다는 빨간색 콘솔 에러가 발생하였다.
- 홈 리스트에서 상세 페이지, 그리고 상세 페이지에서 홈 리스트로 갈 때 두 경우를 각각 살펴보자.
홈 리스트 -> 상세 정보 페이지
- 우선 렌더링 하는 부분에서 data 변수에 접근하는 부분을 에러를 방지하기 위해 data? 로 작성해주었다.
- 그래도 발생하는 에러가 있어 확인해보니, apollo client의 기본적인 특성 때문에 발생하는 에러였다.
- apollo client는 쿼리 요청을 보내 데이터를 한 번 불러오면, 쿼리 요청을 최소화하기 위해 쿼리 요청을 추가적으로 보내지 않고 기존에 가지고 있던 캐시 데이터를 이용하여 반환하는 특징이 있다.
- 따라서 앞으로 가기를 이용하여 페이지를 다시 열었을 때, 상세 페이지 쿼리를 이미 한 번 보냈기 떄문에 추가적으로 보내지 않게 된것이다.
- 그에 따라 onCompleted 함수에서 data 변수에 접근을 해야하는데, 쿼리를 보내지 않기 때문에 당연히 존재하지 않는 data에 접근하려고 하여 에러가 발생한 것이다.
- 게시물에 해당하는 상호의 지도 위치를 나타내는 함수 및 본인 여부를 확인하는 state 갱신을 위해 onCompleted 함수에서 data에 접근하는 부분은 반드시 필요했다.
- 따라서 캐시 데이터를 포기하기로 결정하였고, 쿼리 부분의 fetchPolicy를 'no cache'로 설정하였다.
- fetchPolicy는 이외에 다른 속성들이 존재한다. 추후에 fetchpolicy에 대해 자세히 기술하도록 할 것이다.
상세 정보 페이지 -> 홈 리스트
- 상세 정보 페이지에서 홈 리스트로 뒤로 가기를 눌렀을 때도, 위와 같은 에러가 발생하였다.
- 그 이유도 위와 마찬가지였다.
- list 상태는 쿼리 요청을 보내고 data를 받아오면, 이 data 내 게시물 리스트 내용으로 갱신된다.
- 그리고 프로젝트 개발 초기에는 이 list를 이용하여 목록을 렌더링하였다.
- 처음 페이지를 열 때는 쿼리 요청을 보내서 data를 받아오기 때문에, onCompleted 함수를 이용하여 문제없이 갱신하였다.
- 하지만 이후에 뒤로가기 등을 이용하여 페이지를 다시 열면, 이미 불러온 캐시 데이터를 이용하여 반환하려는 apollo의 특성 때문에 쿼리 요청을 추가적으로 보내지 않는다.
- 이에 따라 onCompleted 함수에서는 데이터를 받아와야만 의미가 있는 data가 존재하지 않기 때문에 여기에 접근하려고 하자 에러가 발생한 것이다.
- 따라서 list state를 삭제하고, onCompleted 함수를 삭제하였다.
- 그리고 리스트를 렌더링하는 부분을 data? 를 이용하여 작성하였다.
- 초기에 이 프로젝트를 개발을 할 때 data 접근 에러가 계속 발생하여, 홈 리스트를 열 때마다 쿼리 요청을 보내도록 fetchPolicy를 'network-only'로 수정했었다.
- 하지만 홈 리스트는 인피니티 스크롤을 이용하기 때문에, 페이지를 열 때마다 쿼리를 보내면 페이지가 초기화되기 때문에 사용자 입장에서 굉장히 불편함을 느낄 것이라 생각들었다.
- 따라서 fetchPolicy를 'cache-first'로 수정해서 홈 리스트 페이지에서는 한 번 불러온 데이터를 계속해서 이용하도록 변경하였다.
- 그리고 data 접근 에러는 위에서 작성한 대로 list state를 onCompleted에서 불러온 data 내용을 갱신하도록 하는 것을 삭제하고, 렌더링하는 부분을 data?로 수정해주었다.
꾸준한 기록