apollo client 로컬상태관리(cache state)

zansol·2019년 8월 25일
0
post-thumbnail

😺 로컬 상태 관리

cacheState.js

apollo-client에서 초기값을 정해주는 파일로, 로컬 상태를 관리할때 사용한다. 관리되는 상태는 정하기 나름이지만, 유저의 입력정보를 주로 관리했다.
cacheState.js파일은 각 views와 관련이 있는 데이터의 초기 상태를 지정하는 파일이다.
cacheState를 지정할때, 반드시 __typename 속성을 작성해야한다. 아폴로 캐쉬의 모든 상태는 graphql의 type 시스템을 따라가기 때문에, 각 객체 단위마다 __typename 속성에 type 이름을 작성해야한다.

initialCacheState.js

위와 같이 초기 상태를 작성했으면, 이 내용을 아폴로 client를 생성하는 생성자 옵션에 추가한다. lib/apollo/initialCacheState에 접근하여 각 view의 cacheState 를 추가한다.

queries.js

queries.js에서 query, mutation을 통해 값을 소비하고, 변경한다.

🎃 마무리

views/index.js 👉 cacheState.js(로컬 상태 관리) 👉 lib/apollo/initialCacheState cacheState 추가 👉 queries.js에서 client query 와 mutation 만들어주기 👉 index.js에서 소비하고, 업데이트하기

참고

profile
Junior Front-end Developer

5개의 댓글

comment-user-thumbnail
2019년 10월 5일

예시문해서 자세한 설명 부탁드려도 될까요?
오늘 하다가 실패해서요...

1개의 답글
comment-user-thumbnail
2019년 12월 14일

관리페이지 만들 때 라우터로 페이지 이동시 데이터를 캐시에서말고 항상 서버에서 불러오는 부분이 잘안되더라구요..
캐시에서 불러올경우.. 항상 서버에서 불러올경우..
어렵네요..

2개의 답글