toggleLike

들어가기
app에서 하트를 눌렀을때, 색깔이 변하고, like 숫자가 올라감.
components/Photo.js 중에서 관련 부분만 보여주겠습니다.

1.components/Photo.js

///1번

  mutation toggleLike($id: Int!) {
    toggleLike(id: $id) {
      ok
      error
    }
  }
`

/// 2번

  const [toggleLikeMutation] = useMutation(TOGGLE_LIKE_MUTATION, {
    variables: {
      id,
    },
    update: updateToggleLike,
  })

id는 function Photo({id,user, caption, file, isLiked, likes})...로 받음.

///3번

const updateToggleLike = (cache, result) => {
    const {
      data: {
        toggleLike: { ok },
      },
    } = result
    if (ok) {
      const photoId = `Photo:${id}`   ************유심히볼것
      cache.modify({ 
        id: photoId,    ******************유심히 볼것
        fields: {
          isLiked(prev) {
            return !prev
          },
          likes(prev) {
            if (isLiked) {
              return prev - 1
            }
            return prev + 1
          },
        },
      })
    }
  }

///4번, onPress를 넣음.

<Action onPress={toggleLikeMutation}>
            <Ionicons
              name={isLiked ? 'heart' : 'heart-outline'}
              color={isLiked ? 'tomato' : 'white'}
              size={22}
            />
          </Action>

///5번.

<TouchableOpacity
          onPress={() => navigation.navigate('Likes', { photoId: id })} >

like를 누른 사람들을 보는 page로 이동, 이동할때, photoId:id 로 props로 보내준다.!!
매우 중요!