npm i jwt-decode

보통 node에서 로그인 기능 중 토큰을 생성을 위해 jsonwebtoken 라이브러리를 이용한다.

import jwt from 'jsonwebtoken'

jwt.sign(payload, SECRET_KEY, {expiresIn})

토큰 생성시에 위와 같은 형식을 사용하는데 난 payload에 대해 의문을 가지고 있었다. payload에 기입한 객체를 어떻게 효율적으로 사용하는거지?
로그인과 동시에 context API에 userData(id, username, createdAt, token) 를 받아오고 localStorage에 token만 저장해두었다.

const decodeToken = decode(localSorage.getitem(key))
initialState.user = decodedToken;

이렇게 decode하여 토큰을 불러오게되면 웹을 새로고침할 경우에도 payload, expiresIn 정보를 모두 context API의 initialState에 저장할 수 있다.
유저정보를 localStorage에 담지 않으면서도 효율적으로 사용할 수 있는 법을 알게되었다.

route render vs component

<Route exact path="/login" component={login} /

보통 위와 같은 형식으로 Route를 사용하지만 login component에 새로운 props를 전달해 주고자 할 경우 적용되지않기 때문에 따로 권장되는 방식이 있다.

<Route exact path="/login" render((props) => <Component {...props} newProps={newProps} ) / >

...props에는 기본적인 {location, history, match} 등의 객체가 들어있다.

npm i apollo-link-context

로그인 후 서버에 mutation 요청 시에 매번 athorization에 토큰 정보를 전달하는 것은 번거로운 일이다.

import { setContext } from 'apollo-link-context';

const authLink = setContext(() => {
const token = localStorage.getitem(key);
return {
headers {
Authorization : Bearer ${token}
},}})

위와 같이 변수를 선언하고

const client = new ApolloClient({
link: authLink.concat(httpLink)
})

기존에 있던 httpLink를 concat해주면 mutation요청 시에 항상 headers에 권한요청을 담아 보내게 된다.

readQuery, WriteQuery

const [callback, {error}] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update(cache,result) {
const data = cache.readQuery({ query: FETCH_POSTS_QUERY })
cache.WriteQuery({
query: FETCH_POSTS_QUERY,
data: { getPosts: [result.data.createPost, ...data.getPosts] },
})}})

mutation 요청 후 apollo-cache를 즉시 업데이트 하기 때문에 화면에 즉각 반영이 되어 편리한 기능이다.