useMutation(1) constant.js, apollo.js, App.js

server와 client 간의 data를 주고 받는 mutation
client부분의 가장 중요한 부분. subscription과 더불어~
눈감고도 머리속에 그려져야함..
let's do it!

1. src/constant.js

export const LOCALSTORAGE_TOKEN='insta-token'

token을 담을 key를 설정.
참고로 나중에 localStorage에 'insta-token'에 token이 저장된 것을 확인 가능함.
console.log(localStorage) 찍어보면 나옴.

2. src/apollo.js

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

export const darkModeVar = makeVar(false)

console.log(localStorage)

const token = localStorage.getItem(LOCALSTORAGE_TOKEN)
///4. Login.js에서 login mutation을 성공하면 token을 server로부타
///return받아 localStorage에 LOCALSTORAGE_TOKEN애 담아줌.
///그래서 apollo.js에서 token을 LOCALSTORAGE_TOKEN으로부터 추출함.

console.log(token)

export const isLoggedInVar = makeVar(Boolean(token))
///5. token이 존재하면 login상태가 계속유지됨.



export const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
})

///1. client를 만들어서 server와 접속함.
///2. uri는 server 주소, 반드시 server를 실행시켜놓은 후에, 돌려야 함.
///3. '@apollo/client'에서 불려 지는것을 확인 바람.

3.src/App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { client, darkModeVar, isLoggedInVar } from './apollo'
//3. './apollo'에서 client를 import해줌.

import Home from './screens/Home'
import Login from './screens/Login'
import { useReactiveVar, ApolloProvider } from '@apollo/client'
//1. @apollo/client에서 ApolloProvider를 import해줌.

import Nomad from './screens/Nomad'
import { ThemeProvider } from 'styled-components'
import { darkTheme, GlobalStyles, lightTheme } from './styles'
import SignUp from './screens/SignUp'
import routes from './routes'
import { HelmetProvider } from 'react-helmet-async'

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  const darkMode = useReactiveVar(darkModeVar)

  
  return (
    <ApolloProvider client={client}>
  	//2. 모든 Page에서 clietn를 사용하기 위해서 App.js return의
    //가장 윗부분에 넣어줌.
  
      <HelmetProvider>
        <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
          <GlobalStyles />
          <Router>
            <Routes>
              <Route
                path={routes.home}
                exact
                element={isLoggedIn ? <Home /> : <Login />}
              />
              {isLoggedIn ? null : (
                <Route path={routes.signUp} element={<SignUp />} />
              )}
              <Route path="/nomad" element={<Nomad />} />
            </Routes>
          </Router>
        </ThemeProvider>
      </HelmetProvider>
    </ApolloProvider>
  )
}

export default App