Optimistic UI

0.빨리빨리

한국 사람들은 빨리빨리를 좋아한다.
하지만 요청을 주고 받다보면 항상 바로바로 처리되진 않는다.
그렇다면 실패해도 리스크가 크지 않으면서 성공률이 상당히 높은(97%이상) 요청에 한해서 실제로 반영되기 전에 미리 브라우저상에서만 긍정적인(성공한) 결과를 보여줘도 괜찮지 않을까?

1.Optimistic UI

실패해도 크게 문제가 되지 않으면서 성공률이 높은 기능(좋아요, 찜 등)의 변경사항을 속여보자

const onClickOptimisticUI = () => {
    likeBoard({
      variables: { boardId: "6269ed5aa8255b002988d662" },
      // refetchQueries: [
      //   {
      //     query: FETCH_BOARD,
      //     variables: { boardId: "6269ed5aa8255b002988d662" },
      //   },
      // ],
      optimisticResponse: {
        likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
      },
      update(cache, { data }) {
        cache.writeQuery({
          query: FETCH_BOARD,
          variables: { boardId: "6269ed5aa8255b002988d662" },
          data: {
            fetchBoard: {
              _id: "6269ed5aa8255b002988d662",
              __typename: "Board",
              likeCount: data.likeBoard,
            },
          },
        });
      },
    });
  };

주석처리 된 부분은 실제로 refetch된 다음 브라우저에 변화를 주는 방식이고
optimisticResponse가 반영되기 전에 미리 긍정적인 결과를 보여주는 방식이다.

2.문제점?

• 실패하게되면 그 처리는 어떻게 할 것인가?

  좋아요 기능을 예로 들면 좋아요가 눌려있는 상태의 버튼을 슬그머니 누르기 전 상태의 버튼으로 되돌리면 된다.