optimistic ui

1%의 실패를 제외한 99%의 성공의 경험을 제공하는 낙관적인ui 이다

이 ui 를 사용하는 곳은 실패 확률이 낮은 곳, 혹시 실패해도 상관이 없는곳, 실패해도 문제가 크지 않은 곳에만 사용해야 한다

useMutation을 이용해 성공된 값을 불러와서 보여준다

좋아요카운트를 만든다면 refetch를 해서 좋아요가 올라간 수 만큼 보여줄 수도 있지만
리렌더링이 일어나기 때문에 속도가 느리게 된다
그단점을 보완하기 위해 optimisticUI를 통해 가짜결과를 먼저 보여주고 그뒤에 진짜결과를 보여주어 유저가 보다 빠른 결과를 받아 볼 수 있다

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: "6269ece8a8255b002988d634",
    },
  });
  const [likeBoard] = useMutation(LIKE_BOARD);

  const onClickOptimisticUI = () => {
    likeBoard({
      variables: { boardId: "6269ece8a8255b002988d634" },
      // refetchQueries: [
      //   {
      //     query: FETCH_BOARD,
      //     variables: { boardId: "6269ece8a8255b002988d634" },
      //   },
      // ],
      optimisticResponse: {
        likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
      },
      update(cache, { data }) {
        cache.writeQuery({
          query: FETCH_BOARD,
          variables: { boardId: "6269ece8a8255b002988d634" },
          data: {
            fetchBoard: {
              // _id, __typename 은 공식이다 둘 중 하나라도 빠지면 데이터를 찾지 못한다 꼭 둘 다 적어주기!
              _id: "6269ece8a8255b002988d634",
              __typename: "Board",
              likeCount: data.likeBoard,
            },
          },
        });
      },
    });
  };
  return (
    <div>
      <h1>OptimisticUI</h1>
      <div>좋아요카운트:{data?.fetchBoard.likeCount}</div>
      <button onClick={onClickOptimisticUI}>좋아요👍</button>
    </div>
  );
}

꼭 실패를 해도되는 그렇게 중요하지 않은곳에서만 쓰길...!!