refetchQueries

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

어떻게 사용하는지 예제를 통해 알아보겠습니다. 아래 예제는 사용 방법으로만 보시면 좋을 것 같습니다.

refetchQuery의 사용 방법

// 삭제 Mutation
const deleteBoard = async () => {
	try {
		const result = await deleteBoard({
			variables: {
				boardId: router.query.boardId,
			},
		});
	} catch (error) {
		console.log(error);
	}
};

위의 코드는 흔하게 볼 수 있는 삭제 Mutation입니다.

위 코드는 삭제 Mutation이 실행 된 후에는 데이터가 변경 되었을 테지만 아직 최신 데이터가 반영 되지 않았습니다.

따라서 refetchQueries를 이용해 최신 데이터로 다시 받아오겠습니다.

//refetchQueries를 이용해 최신 데이터 받아오기

const deleteBoard = async () => {
	try {
		const result = await deleteBoard({
			variables: {
				boardId: router.query.boardId,
			},
			refetchQueries: [
				{
					query: FETCH_BOARDS
				},
			]
		});
	} catch (error) {
		console.log(error);
	}
};

위의 코드를 자세히 살펴보시면 useMutation 함수 안에서 refetchQueries라는 키가 있다는 것을 알 수 있습니다. refetchQueries는 Apollo에서 제공하는 기본 기능입니다.

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

• refetchQuery에 관해 더 공부할 수 있는 문서 입니다. 한번쯤은 읽어보시는걸 추천 드립니다. refetchQueries 공식 문서 링크 refetchQueries 공식 문서 링크2
  

💡 refetchQueries에서의 variables
→ 기존의 fetch 부분에서 보내준 variables가 없다면 따로 적지 않아도 되지만, 만일 보내준 variables가 있다면 refetchQuerise부분을 아래와 같이 적어주세요

refetchQueries: [
	{
	query : FETCH_BOARDS,
    variables : { 기존의 fetch때 보내준 것 }
	},
]

(모든 Mutation 이후에 refetchQueries를 사용하는 것은 아닙니다. Mutation 이후 변경된 데이터를 받아올 수 없을 경우에 사용합니다.)