graphql-apollo with React Post app. 과정 정리.

mongoDB와 apollo-server를 연동하여 서버를 구축한다.

user, post schema model을 설계한다.

typeDefs와 resolvers를 통해 Register, login, logout, token을 구성한다.

이어서 getPosts, getPost, createPost, DeletePost를 구성한다.

likePost, likeCount, createComment, deleteComment, Comment Count를 구성한다.

react에서 Post page에 전체 데이터 getPost를 Query 요청하여 받아온다.

Register, login page에서 user정보와 token을 mutation 요청으로 받아온다.

받아온 user data를 redux 또는 Context API에 저장해 둔다.

login시 data중 Token만 localStorage에 저장하고, logout시 제거한다. get할때에는 Token을 decode하여 token payload에 저장된 정보를 통해 추가 user data정보를 가져온다.

저장해둔 state에 user data 유무를 판단하여 navBar menu를 control한다. ex) user data가 없으면 Register, Login을 있으면 Logout, username을 표시

login 후 Route의 Redirect 기능으로 pathname을 통한 login, logout component 접근 차단.

apollo-link-context library에서 setContext headers에 localStorage에 저장된 token을 보내고 재사용성을 높힌다.

apollo cache에 전체 Posts가 저장되어있기 때문에 Post를 새로 만들때에 .writeQuery를 사용하여 전체 Posts쿼리를 불러온 후 새로운 포스트를 캐시에 저장하여 바로 업데이트 한다.

context api에 저장된 userData의 username과 post, likeBtn, Comment의 username과 동일할 경우 update가 가능한 로직을 구성.