location.reroad()
상황
freeboard 상세 화면에서
좋아요, 싫어요를 눌렀을 때 state 값이 바뀌는 것까지는 구현했으나
직접 새로고침을 누르지 않으면 화면에 나타나는 숫자가 변경되지 않았다.
해결 방법
JavaScript의 내장 함수인 location.reroad()
를 추가해서 자동으로 새로고침 되게 바꿨더니 자동으로 새로고침이 이루어졌다.
그리고 함수 실행 시 위치해있던 화면 영역에서 그대로 있는 상태로, 새로고침과 함께 화면의 값만 다시 불러와줘서 좋아요/싫어요 기능이 잘 구현되었다! 굿
const LIKE_BOARD = gql`
mutation likeBoard($boardId:ID!){
likeBoard(boardId:$boardId)
}
`
const DISLIKE_BOARD = gql`
mutation dislikeBoard($boardId:ID!){
dislikeBoard(boardId:$boardId)
}
`
export default function BoardsDetailPage(){
const router = useRouter()
/*LIKE_BOARD*/
const [likeBoard] = useMutation(LIKE_BOARD)
const onClickLike = async ()=>{
try{
const result = await likeBoard({
variables: {boardId: router.query.boardid }}
)
location.reload()
}catch(error){
alert(error.message)
}
}
/*DISLIKE_BOARD*/
const [dislikeBoard] = useMutation(DISLIKE_BOARD)
const onClickDisLike = async ()=>{
try{
const result = await dislikeBoard({
variables: {boardId: router.query.boardid }}
)
location.reload()
}catch(error){
alert(error.message)
}
}
return (
<LikeWrapper>
<Like>
<LikeIcon onClick={onClickLike}></LikeIcon>
<LikeCount>{data?.fetchBoard.likeCount }</LikeCount>
</Like>
<Like>
<DisLikeIcon onClick={onClickDisLike}></DisLikeIcon>
<DisLikeCount>{data?.fetchBoard.dislikeCount }</DisLikeCount>
</Like>
</LikeWrapper>
)
}
파일 위치: freeboard-frontend/boards/[id]/index.js