[코드캠프 2주차]reFetch

[자동으로 Fetch 하기]

refetchQueries 를 사용한다. 어떠한 API로 요청이 갔을때, DB에는 정상적으로 업데이트가 되지만 브라우저는 변경사항을 보여주지 않는다. 자동으로 Fetch를 해주는 기능이다. 진짜 편한 기능 같다.. 원래였으면 새로고침을 통해서 다시한번 데이터를 불러와야 했지만, graphQL 중에 자동으로 reFetch를 해주는 기능이 있다는 점에 놀랐다.
사용법은 useMutation으로 지정해둔 하나의 API 요청 함수 내에서 refetchQueries를 사용하는데 어떠한 API를 다시 refetch 하는지 다시한번 정의만 해주면 된다.

const FETCH_BOARDS = gql`
  query fetchBoards {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

const DELETE_BOARDS = gql`
  mutation deleteBoard($number: Int) {
    deleteBoard(number: $number) {
      message
    }
  }
`;

//상단부분------
const clickDeleteBtn = async (e) => {
    try {
      const result = await deleteBoard({
        variables: {
          number: Number(e.target.id),
        },
        refetchQueries: [{ query: FETCH_BOARDS }],//deleteBoard API를 요청했을때 
        //FETCH_BOARDS의 query를 다시 한번 자동으로 요청한다.
      });
      console.log("통신결과", result, "이벤트 ID", e.target.id);
      alert("정상적으로 삭제되었습니다.");
    } catch (error) {
      console.log(error);
    }
  };