Optimistic-Ui
Optimistic UI는 특정 요청이 성공 할 것이라 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 어떤 요청이 아주 높은 확률로 성공한다는 보장이 있을 때 사용할 수 있다,
오류가 발생했을 경우
성공할거라고 예상했는데, 뒤늦게 서버에서 에러가 났다는 응답이 오면 조용히 원래 상태로 되돌린다.
import { gql, useMutation, useQuery } from "@apollo/client";
export default function OptimisticUIPage() {
const [likeBoard] = useMutation(LIKE_BOARD);
const { data } = useQuery(FETCH_BOARD, {
variables: { boardId: "6138031babd89b00293ae454" },
});
const onClickLike = () => {
likeBoard({
variables: { boardId: "6138031babd89b00293ae454" },
// optimisticResponse: graphQL에서 mutation을 할 때 제공하는 옵션.
optimisticResponse: {
likeBoard: data?.fetchBoard.likeCount + 1,
},
update(cache, { data }) {
cache.writeQuery({
query: FETCH_BOARD,
variables: { boardId: "6138031babd89b00293ae454" },
data: {
fetchBoard: {
// _id, __typename 반드시 적어야한다.
_id: "6138031babd89b00293ae454",
__typename: "Board",
likeCount: data.likeBoard,
},
},
});
},
});
};
return (
<>
<div>좋아요 갯수: {data?.fetchBoard.likeCount}</div>
<button onClick={onClickLike}>좋아요 올리기!!</button>
</>
);
}
likeBoard 함수가 실행 될 때, optimisticResponse에 적은 내용이 apollo-client-cache에 optimistic 버전으로 따로 저장된다.
apollo-client는 이를 알아차려 저장된 데이터를 가지고 연관된 컴포넌트들을 다시 렌더링한다. 이 때, 네트워크 요청이 필요없으로 사용자들에게 거의 바로 반영된다.
서버에서 진짜 데이터를 응답으로 받으면, apollo-client는 기존의 optimistic 버전을 지우고 서버에서 받은 데이터를 저장한다.
apollo-client는 다시 이를 알아차리고 연관된 컴포넌트를 다시 렌더링 한다.
참고: https://velog.io/@h1225hs/Optimistic-UI
Author And Source
이 문제에 관하여(Optimistic-Ui), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sejung1997/Optimistic-Ui저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)