Me.js

들어가기
insta에서 나에대한, loggendInUser에 대한 정보를 계속해서 받아야
할 떄가 많다.
그래서 useMe hook을 만들어 놓으면 편함

query me 를 이용해서 loggedInUser의 id, username, avatar를 어느 page에서든 불러올 수 가 있음.

1. hooks/useMe.js

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

const ME_QUERY = gql`
  query me {
    me {
      id
      username
      avatar
    }
  }
`

export default function useMe() {
  const hasToken = useReactiveVar(isLoggedInVar)
  const { data } = useQuery(ME_QUERY, {
    skip: !hasToken,
  })
  useEffect(() => {
    if (data?.me === null) {
      logUserOut()
    }
  }, [data])
  return { data }
}

2.navigator/LoggedInNav.js

<Tabs.Screen
        name="tabMe"
        options={{
          tabBarIcon: ({ focused, color, size }) => 
          data?.me?.avatar ? (
            <Image 
             source={{uri:data.me.avatar}}
             style={{ height:20, width:20, borderRadius: 10 }} />
          ) : (
           <Ionicons name="person" color={color} size={focused ? 24 : 20} />
          )
        }}
      >

useMe hook을 사용해서 인스터 어플 맨밑에 Me page를 보는 icon을 나의 avatar로 바꿀 수 있음.