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