Local Only field

들어가기
local only field는 schema에 정의되지 않은 것을 말함.
서버에는 없지만, application에는 있는 state.
login, logout, token 같은것.
login상태인지 아닌지를 알아봐줌.
모든 page에서 다룰 수 있는 state임,
순서대로 따라가는게 중요함.

1. src/apollo.ts

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

const token = localStorage.getItem(LOCALSTORAGE_TOKEN)
///2. localstorage(LOCALSTORAGE)에 담긴 token을 get함.

export const authTokenVar = makeVar(token)
///3. 위에서 get한 token을 makevar(token)으로
///authTokenVar에 담아줌.

export const isLoggedInVar = makeVar(Boolean(token))
///4. token의 유무에 따라 isLoggedInVar가 
///true/false를 return함.


const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
})

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-jwt': authTokenVar() || '',
    },
  }
})

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
  1.///아래와 같이 typePolicies-Query-field-아래에
  ///isLoggedIn, token 두개를 만듬.
  ///isLoggedIn은 isLoggedInVar()를 return
  ///token은 authTokenVar를 return
    typePolicies: {
      Query: {
        fields: {
          isLoggedIn: {
            read() {
              return isLoggedInVar()
            },
          },
          token: {
            read() {
              return authTokenVar
            },
          },
        },
      },
    },
  }),
})

2. app.tsx

import { useReactiveVar } from '@apollo/client'
import React from 'react'
import { isLoggedInVar } from './apollo'
import { LoggedInRouter } from './router/logged-in-router'
import { LoggedOutRouter } from './router/logged-out-router'

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  ///useReactiveVar를 이용해서 apollo.ts에서 만든
  ///isLoggedInVar의 값을 불러옴.
  
  return isLoggedIn ? <LoggedInRouter /> : <LoggedOutRouter />
}

export default App

3.src/pages/login.tsx

***필요없는 부분은 삭제함..

import { gql, useMutation } from '@apollo/client'
import React from 'react'
import { authTokenVar, isLoggedInVar } from '../apollo'

import { LOCALSTORAGE_TOKEN } from '../constant'

export const Login = () => {
  const {
    register,
    getValues,
    formState: { errors, isValid },
    handleSubmit,
  } = useForm<ILoginForm>({
    mode: 'onChange',
  })

  const onCompleted = (data: LoginMutation) => {
    const {
      login: { ok, token },
    } = data
    if (ok && token) {
      console.log(token)
      localStorage.setItem(LOCALSTORAGE_TOKEN, token)
      ///login을 실행후, server로부터 받은 token을
      ///localstorage의 key가  LOCALSTORAGE_TOKEN인 곳에
      ///token을 담아줌(setItem
      
      authTokenVar(token)
      ///apollo.ts에서 만든 authTokenVar에 token을 담아줌.
      isLoggedInVar(true)
      ///isLoggedInVar를 true로 바꿔줌,
    }
  }

NOTICE!!
login이 이뤄지고 유지되는 과정!!
매우 중요하쥬!