GraphQL-refetchQueries

Graphql에서 데이터를 조회하는 경우는 Queries를 사용한다고 했습니다. 허나 사용자가 게시판에 글을 작성하거나, 기존의 글을 수정 및 삭제하는 경우 기존의 데이터와는 값이 달라지기 때문에 새로운 데이터로 다시 받아와 보여주어야 합니다.

refetchQuery는 기존에 받아왔던 데이터가 변경 되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용됩니다.

사용법

//refetchQueries를 이용해 최신 데이터 받아오기
const deleteBoard = useMutation(DELETE_BOARD);

const deleteBoard = async () => {
	try {
		const result = await deleteBoard({
			variables: {
				boardId: event.target.id,
			},
			refetchQueries: [
				{
					query: FETCH_BOARDS,
                    variables: { 기존의 fetch때 보내준 것 }
				},
			]
		});
	} catch (error) {
		console.log(error);
	}
};

위 코드를 살펴보면 useMutation 함수 안에서 인자를 선언해주는 variables를 제외하고 refetchQueries라는 키를 볼 수 있습니다. refetchQueries는 Apollo에서 제공하는 기본 기능입니다.

refetchQueries는 배열로 시작하여, 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해주면 Mutation이 성공적으로 끝났을 경우 refetchQueries를 실행시켜줍니다.

만약 refetchQueries에서 재요청하는 query가 variables가 없다면 생략 가능합니다.