[GraphQL] Apollo-Client - refetchQueries

refetchQueries란?

---

Create / Delete 메소드를 실행할 경우, API상에서는 해당 작업이 완료되어도 화면에 다시 불러오는 작업(refetch)을 하지 않으면 변경사항이 반영되지 않는다. 실제로는 이미 지워진 데이터인데 화면상에 계속 보일 수 있는 것. 이럴 때 사용하는 것이 refetchQueries 이다.

 

용례

---

// 예시 코드 - 댓글 삭제하기 API
    const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT)
    // DELETE_BOARD_COMMENT는 다른 파일에서 import 해온다.
    const onClickCommentDelete = async (event) => {
        console.log(event.currentTarget.id)
        const password = prompt("비밀번호를 입력해주세요.")
        await deleteBoardComment({
            variables: {
                password: password,
                boardCommentId: event.currentTarget.id
            },
            refetchQueries: [{
                query: FETCH_BOARD_COMMENTS,
                variables: {boardId: String(router.query.new)}
            }]
        })
    }

주의! 해당 API를 fetch 할 때 입력했던 variables가 있다면 refetch시에도 동일하게 입력해줘야 한다.