graphQL 의 refetch 복습정리
1. Mutation 이후 refetch 하기
// 쿼리문
const FETCH_BOARDS = gql`
query {
fetchBoards {
number
writer
title
contents
}
}
`;
const DELETE_BOARD = gql`
mutation deleteBoard($number: Int) {
deleteBoard(number: $number) {
message
}
}
`;
const [deleteBoard] = useMutation(DELETE_BOARD);
const onClickDelete = async (e) => {
const result = await deleteBoard({
variables: {
number: Number(e.target.id),
},
refetchQueries: [{ query: FETCH_BOARDS }],
});
console.log(result.data.deleteBoard.message);
};
2. Query 이후 refetch 하기
// 쿼리문
const FETCH_BOARDS = gql`
query fetchBoards($page: Int) {
fetchBoards(page: $page) {
_id
writer
title
contents
}
}
`;
const { data, refetch } = useQuery<
Pick<IQuery, "fetchBoards">,
IQueryFetchBoardsArgs
>(FETCH_BOARDS);
const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
refetch({ page: Number(e.currentTarget.id) });
};
페이지 번호 표시하기
리팩토링 전
const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
refetch({ page: Number(e.currentTarget.id) });
};
return(
{[1, 2, 3, 4, 5, 6].map((el) => {
return (
<span key={el} id={String(el)} onClick={onClickPage}>
{el}
</span>
);
})}
)
리팩토링 후
const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
refetch({ page: Number(e.currentTarget.id) });
};
return(
{new Array(10).fill(1).map((_, index) => {
return (
<span key={index + 1} id={String(index + 1)} onClick={onClickPage}>
{index + 1}
</span>
);
})}
)
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
[ 40 ] 페이지네이션 - 첫째페이지 , 마지막 페이지 리팩토링 (0) | 2024.07.02 |
---|---|
[ 39 ] 페이지네이션 - 이전페이지, 다음페이지 (0) | 2024.07.02 |
[ 37 ] 글로벌 스타일과 폰트 (0) | 2024.06.28 |
[ 36 ] 컴포넌트 합성 (0) | 2024.06.27 |
[ 35 ] 레이아웃 만들기 (0) | 2024.06.27 |