[코드캠프 7주차]optimistic-ui

optimistic-ui는 약간 사용자에게 속임수를 줄수 있는 기능이다.
좋아요를 올려주는 api가 있다고 해보자, 좋아요 기능은 버튼을 한번 클릭 할때 마다, 좋아요가 카운트가 될것이다. 하지만 네트워크의 속도에 따라서 좋아요를 클릭했는데 좋아요가 카운트가 되는 속도가 사람마다 약간씩 다를것이다. 금방 올라가거나, 아니면 엄청 늦게 올라가거나 둘중에 하나일 것이다.
optimistic-ui는 이러한 부분들을 약간의 속임수를 통해 카운트를 증가시킨다.

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)
  }
`;

const OptimisticUiPage = () => {
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      boardId: "6269ed5aa8255b002988d662",
    },
  });

  console.log(data);

  const [likeBoard] = useMutation(LIKE_BOARD);
  const onClickOptimisticUI = () => {
    likeBoard({
      variables: {
        boardId: "6269ed5aa8255b002988d662",
      },
      //   refetchQueries: [
      //     {
      //       query: FETCH_BOARD,
      //       variables: { boardId: "6269ed5aa8255b002988d662" },
      //     },
      //   ],

      // 데이터가 fetch 되면서 오는 시간이 있기 때문에 우선적으로 데이터를 프론트에서 먼저 조작해서 보여주겠다는 뜻임
      // 그리고 실질적으로 response 가 오면 실제 데이터로 업데이트를 다시 해줌
      // 근데 이거 굳이 왜 해줘야함?? 이거 사용자 컴퓨터가 느리면 해줘야함 고민좀 해봐라 할지 말지
      optimisticResponse: {
        likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
      },
      // 백엔드에서 받아온 데이터와 상관 없이 우리가 프론트에서 직접 캐시 값을 수정해서 api에서 요청받은게 0인데 10으로 바꿀수 있음
      update(cache, { data }) {
        cache.writeQuery({
          query: FETCH_BOARD,
          variables: { boardId: "6269ed5aa8255b002988d662" },
          data: {
            fetchBoard: {
              _id: "6269ed5aa8255b002988d662",
              __typename: "Board",
              likeCount: data.likeBoard,
            },
          },
        });
      },
    });
  };
  return (
    <div>
      <h1>옵티미스틱 UI</h1>
      <div>현재 좋아요 카운트:{data?.fetchBoard?.likeCount}</div>
      <button onClick={onClickOptimisticUI}>좋아요 올리기!</button>
    </div>
  );
};

export default OptimisticUiPage;

기존에는 데이터를 새로고침 할떄 refetchQueries를 사용하여 좋아요 카운트가 증가되면 다시 api를 호출하는 방식이였지만, optimistic-ui 를 사용하게 되면 데이터가 fetch가 되면서 오는시간이 있기 떄문에 우선적으로 프론트에서 속임수로 카운트를 하게 해주고 데이터가 왔을때 다시 값을 제대로 보여준다.
따라서 optimistic-ui는 에러가 나도 별 문제가 없거나,에러가 99% 나지 않는 선에서 사용하는 것이 좋다.