[コードキャンプ2週目]refetch


[自動Fetch]


RefectQueryを使用します.要求がAPIに送信されると、データベースは正常に更新されますが、ブラウザには変更は表示されません.自動Fetchの機能本当に気持ち良さそうな機能...元ならリフレッシュでデータを再ロードする必要がありますが、GraphQLに自動再Fetchの機能があることに驚きました.
使用方法は、useMutationとして指定されたAPI要求関数内でrefretchQueryを使用し、どのAPIを再定義すればよいかを再定義します.
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);
    }
  };