useUser, useQuery, useReactiveVar

들어가기
useUser는 page어디에서나 loggedInUser의 정보를 받아서 사용할수 있음.
useQuery는 server의 Query를 frontEnd에서 사용해서 정보를 뿌릴 수 있음.
useReactiveVar는 page어디에서나 loggedIn 여부를 확인 및 사용가능함.

1. src/hooks/useUser.js

import { gql, useQuery, useReactiveVar } from '@apollo/client'
import { useEffect } from 'react'
import { isLoggedInVar } from '../apollo'
import { LOCALSTORAGE_TOKEN } from '../constant'

const ME_QUERY = gql`
  query me {
    me {
      username
      avatar
      email
    }
  }
`
///1. backend에 ME Query를 만들어줌(user의 정보를 받아오는 query, 밑에 참고)
///2. ME_QUERY를 만들어서 backend의 me query를 실행시킴.

function useUser() {
  const hasToken = useReactiveVar(isLoggedInVar)
  ///3. useReactiveVar(isLoggedInVar)를 이용해서
  ///log in 여부를 확인해서 false일 경우 아래에서 skip(query를 실행안함)시킴.
  
  const { data } = useQuery(ME_QUERY, {
    skip: !hasToken,
  })
  ///4. me query를 실행해서 backend에서 data를 불러움
  
  useEffect(() => {
    if (data?.me === null) {
      localStorage.removeItem(LOCALSTORAGE_TOKEN)
      isLoggedInVar(false)
    }
  }, [data])
  ///5.me query를 실행시켯는데, data가 null이면 logout시킴.
  ///혹시나, front에 token이 있으면 제거함. 그래야
  ///나중에 server와 client 부분의 token을 동일화 시킬 수 있음.
  
  return {data}
  ///6. useUser hook을 실행시키면 data를 받을 수 있게끔, 
  ///{data}를 return시켜줌.
  
}
export default useUser

2. backend(users/me/me.typeDefs.js, me.resolvers.js)

me.typeDefs.js

import { gql } from 'apollo-server'

export default gql`
  type Query {
    me: User
  }
`

me.resolvers.js

import prisma from '../../client'
import { protectedResolver } from '../users.util'

export default {
  Query: {
    me: protectedResolver((_, __, { loggedInUser }) =>
      prisma.user.findUnique({
        where: {
          id: loggedInUser.id,
        },
      })
    ),
  },
}

check!!!
이것만 실행시키면 data.me 가 null로 나옴.
이유는 query를 실행시킬때, front에서 back으로 token을 보내줘야함
back으로 token을 보내는 방법은 apollo.js에서 실행시킴.
다음 Post에서 설명해줌.