최대 1 분 소요

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때 보내준  }
		     },
		]

댓글남기기