send frontenad.token to backend

들어가기
front에서 query나 mutation을 실행시킬떄, back에 token을 보내주어야
되는 경우가 많이 있다. back쪽의 query나 mutation들이 token이 있어야
실행되는 경우가 많이 있기 때문이다
이 문법은 바뀔수가 있으니, 공식 문서를 꼭 참고할 것
front에서 매우매우 중요한 부분입니다!!!!!!!!!!!!!!!!!!!!!!!!!

https://www.apollographql.com/docs/react/networking/authentication/#header

1. src/apollo.js

import {
  makeVar,
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from '@apollo/client'
import { setContext } from '@apollo/client/link/context'
import { LOCALSTORAGE_TOKEN } from './constant'

export const darkModeVar = makeVar(false)

const token = localStorage.getItem(LOCALSTORAGE_TOKEN)
///1.login에서 localStorage에 저장시킨(setItem) LOCALSTORAGE_TOKEN이라는 방에서
///token을 뽑아 냄.(getItem)

export const isLoggedInVar = makeVar(Boolean(token))
///2. 1번에서 뽑아낸 token이 존재하면 isLoggedInVar는 true가 됨.
///나중에 다른 여러page에서 isLoggedIn=useReactiveVar(isLoggedInVar)로 사용함.

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
})
///3. httpLink를 만듬.

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      token: localStorage.getItem(LOCALSTORAGE_TOKEN),
    },
  }
})
///4.authLink를 만듬. token을 headers에 넣어서 같이 보내주는데,
///token은 localStorage.getItem(LOCALSTORAGE_TOKEN)에서 get함.

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})
///5. authLink에 httpLink를 결합시켜서 link를 걸어줌.
///6. 마지막으로 import 되는 부분들 확실히 확인할 것!!!