계속 헷갈려서 정리하는 시리즈 3탄] retchQueries

refetchQuery는 useMutation의 옵션으로, 기존에 받아왔던 데이터가 변경 되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용한다.

refetchQuery는 query와 variable의 배열을 값으로 갖는다. 또 mutation과 동시에 비동기적으로 원하는 쿼리를 refetch한다.

awaitRefetchQueries 옵션을 통해 refetchQueries에 입력한 query의 동기/비동기 여부를 설정할 수도 있다.

• refetchQuery의 사용법을 알아보자.

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

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

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

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

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