optimistic-ui

Optimistic-UI

Optimistic-UI는 직역하면 낙관적-UI 라는 의미이다.
낙관적-UI(Optimistic-UI)는 유저에게 보여주는 데이터를 API 요청을 하는 동시에 바로 변경시켜 보여주는 것을 의미한다.
이로 인해 유저는 조금 더 빠른 서비스를 체감할 수 있게 해준다.
하지만 Optimistic-UI는 사용할 때 주의해야 할 점이 있다.
API 요청 즉, graphQl 요청을 실패할 가능성도 있기 때문에 중요한 데이터에는 사용하지 않는 것이 좋다.
만약 데이터 요청을 실패했을 경우에는 처음에는 데이터가 변경이 되었다가 실패하면 다시 전에 상태로 돌아오게 된다.

예시로 게시판에 좋아요를 올려주는 기능이 있다고 가정을 해보자.
이 좋아요 숫자는 크게 중요한 데이터가 아니기 때문에 Optimistic-UI를 사용해도 좋다.
만약 유저가 좋아요를 누르게 되면 API요청을 하는 동시에 글로벌 캐시 스테이트에 저장되어 있는 값을 동시에 최신화를 해주게 되면서 유저에게 보여주는 것이다.

어떻게 사용하는가?

그래프큐엘(graphQl)에는 optimisticResponse라는 기능이 있다.
의미 그대로 낙관적응답이다.
이를 사용하면 Optimistic-UI를 만들수 있게 된다.

  const onClickOptimisticUI = async () => {
    try {
      await likeBoard({
        variables: {
          boardId: "6269ed43a8255b002988d65f",
        },
        optimisticResponse: {
          likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
        },
        update(cache, { data }) {
          cache.writeQuery({
            query: FETCH_BOARD,
            variables: {
              boardId: "6269ed43a8255b002988d65f",
            },
            data: {
              fetchBoard: {
                _id: "6269ed43a8255b002988d65f",
                __typename: "Board",
                likeCount: data.likeBoard,
              },
            },
          });
        },
      });
    } catch (error) {
      alert(error.message);
    }
  };

위 코드는 좋아요를 클릭 했을때 일어나는 이벤트 함수이다.
클릭을 했을때 그래프큐엘 요청을 하게 되고 동시에 optimisticResponse가 좋아요의 카운트를 올려주고 그 데이터를 보여주는 것이다.
만약 그래프큐엘 요청에 실패한다고 해도 카운트가 올라갔다가 바로 내려가게 되기 때문에 유저입장에서는 '뭔가 잘못됐구나 다시 눌러야지' 라고 생각하게 만들기 때문에 낙관적-UI 인 것이다.