follow, unFollow (2)

**
들어가기
@follow, unfollow mutaion을 실행시켜서
refetchQueries가 아니라 cache를 바로 실시간으로 update하는 방법을 알아본다
2가지 방법으로 알아보는데,

@첫번째, update: followUserUpdate로 cache, result를 받아서 cache를 modify함.
@두번쨰, update가 아닌, onCompleted: followUserCompleted, onCompleted를
사용해서 cache를 modify한다.

@어떤 방법을 사용해도 상관없음, 2가지 방법이 있다는 거를 알아보는 것임.

@두 방법의 차이는 첫번쨰는 cache,result를 받아서 사용하나,
두번쨰 방법은 useApolloClient()를 사용해서 cache를 받아온다.

@apllo.js에서 keyFilelds에서 User를 User:${id}가 아닌 ~~User: ${username} 으로
cache가 Write가 됨을 확인한다.

@insta-web 일단은 마지막 POST, 재밋게 즐겁게, 빠이팅하자
**

1. src/Pages/Profile.js

cache와 관련없는 부분은 생략함..

function Profile() {
  const { username } = useParams()
  const { data: userData } = useUser()
  const client = useApolloClient()  ///onCompleted에서 cache사용위해서 사용함.
  const { data, loading } = useQuery(SEE_PROFILE_QUERY, {
    variables: {
      username,
    },
  })
  
  ///1.followUserUpdate함수를 만들어줌.
  const followUserUpdate = (cache, result) => {
    const {
      data: {
        unfollowUser: { ok },
      },
    } = result
    if (!ok) {
      return
    }
    cache.modify({
      id: `User:${username}`,  ///ketFields에서 설정해준 부분.
      fields: {
        isFollowing(prev) {  ///unfollow button을 눌렀을떄, prev를 false로 바꿈.
          return false
        },
        totalFollowers(prev) {  ///unfollow button을 눌렀을떄, totalfollowers
                                ///count를 1 줄임.
          return prev - 1
        },
      },
    })
    const { me } = userData   ///loggedInUser의 totalFollowing수를 1줄임.
    cache.modify({            ///cache를 호날두꺼와 내꺼 둘다 cache를 modify해야함.
      id: `User:${me.username}`,
      fields: {
        totalFollowing(prev) {
          return prev - 1
        },
      },
    })
  }

  const [unfollowUserMutation] = useMutation(UNFOLLOWER_USER_MUTATION, {
    variables: {
      username,
    },
    update: followUserUpdate,  ///위에서 만든 함수를 update:에 넣어줌.
    //refetchQueries: [
    //{query: SEE_PROFILE_QUERY, variables:{username}}
    //  ,{query:SEE_PROFILE_QUERY, variables:{username:userData?.me?.username}}]
  })
  
  
  const followUserCompleted = (data) => {  ///update가 아닌 onCompleted로 했을시
    const {
      followUser: { ok },
    } = data
    if (!ok) {
      return
    } ///여기까지는 update나 onCompleted나 같음....
    
    const { cache } = client  ///useApolloClient를 이용해 cache를 받아옴.
                            ///아래부분은 update를 이용했을떄와 같음.
                            ///cache, result를 받는게 아니고, data를 받는게 다름.
    cache.modify({
      id: `User:${username}`,
      fields: {
        isFollowing(prev) {
          return true
        },
        totalFollowers(prev) {
          return prev + 1
        },
      },
    })
    const { me } = userData
    cache.modify({
      id: `User:${me.username}`,
      fields: {
        totalFollowing(prev) {
          return prev + 1
        },
      },
    })
  }
  const [followUserMutation] = useMutation(FOLLOW_USER_MUTATION, {
    variables: {
      username,
    },
    onCompleted: followUserCompleted,
    //refetchQueries: [{query: SEE_PROFILE_QUERY, variables:{username}}]
  })

  const getButton = (seeProfile) => {
    const { isMe, isFollowing } = seeProfile
    if (isMe) {
      return <ProfileBtn>Edit Profile</ProfileBtn>
    }
    if (isFollowing) {
      return <ProfileBtn onClick={unfollowUserMutation}>Unfollow</ProfileBtn>
      ///버튼 누를 시, 위에서 만든 unfollowUserMutaion실행됨..
      
    } else {
      return <ProfileBtn onClick={followUserMutation}>Follow</ProfileBtn>
      ///버튼 누를 시, 위에서 만든 followUserMutaion실행됨..
      
    }
  }
  return (
    <div>
      <Header>
        <Avatar src={data?.seeProfile?.avatar} />
        <Column>
          <Row>
            <Username>{data?.seeProfile?.username}</Username>
            {data?.seeProfile ? getButton(data.seeProfile) : null}
          </Row>
.
          .
          .
          
          ~~~~