Optimistic UI

optimistic ui
통신이 느린 컴퓨터에 api 요청을 하게될때 요청이 서버에 도달하기도 전에 화면의 값을 바꾸는 것

언제 사용하는지?
1. 99%성공할 것이 예상되는 api 요청할 때 사용
2. 1% 실패하더라도 문제가 안되는 api 요청할 때 사용

->단순히 좋아요 수를 업데이트 하는 등 중요하지 않고 실패 확률이 낮을 경우 사용한다.

데이터가 중요할 때는 사용하면 안된다.

사용 예시)
좋아요 버튼을 누르면 likeBoard api 요청 전송
요청 응답 후 fetchBoard(게시글 조회) api를 요청해서 좋아요 수를 업데이트

import { gql, useMutation, useQuery } from "@apollo/client";
const FETCH_BOARD = gql`
  query fetchBoard($boardId: ID!) {
    fetchBoard(boardId: $boardId) {
      _id
      likeCount
    }
  }
`;
const LIKE_BOARD = gql`
  mutation likeBoard($boardId: ID!) {
    likeBoard(boardId: $boardId)
  }
`;

export default function OptimisticUIPage() {
  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: 게시글아이디 },
  });
  const [likeBoard] = useMutation(LIKE_BOARD);

  const onClickLike = () => {
    likeBoard({
      variables: { boardId: 게시글아이디 },
      
      //refetchQueries 대신 optimisticResponse 사용
      optimisticResponse: {
        // 먼저 보내는 데이터
        likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
      },
      update(cache, { data }) {
        // data: 진짜 데이터
        // 캐시를 먼저 수정해서 빠른 것처럼 보임
        cache.writeQuery({
          query: FETCH_BOARD,
          variables: {
            boardId: 게시글아이디,
          },
          data: {
            fetchBoard: {
              _id: 게시글아이디,
              likeCount: data.likeBoard,
            },
          },
        });
      },
    });
  };

  return (
    <div>
      <div>좋아요 수 :{data?.fetchBoard.likeCount}</div>
      <button onClick={onClickLike}>좋아요</button>
    </div>
  );
}