[コードキャンプ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);
}
};
Reference
この問題について([コードキャンプ2週目]refetch), 我々は、より多くの情報をここで見つけました https://velog.io/@alsqjarlwkd/reFetchテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol