Optimistic-UI

느리면 눈속임이라도??

좋아요버튼 누르면 좋아요 숫자 증가
백엔드에 데이터 보내고 받아오기, 리페치하기 해야함 -> 느림

먼저 숫자만 올려놓고 DB에 보내고 받아와서 일치하면 그대로 두는 방법
실패할 가능성이 매우 낮은 경우 이렇게 눈속임하면 빠름(가짜 좋아요를 만듦) -> Optimistic-UI

response를 두번 받음
한번은 가짜, 한번은 진짜

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

    const onClickOptimisticUI = async () => {
        await likeBoard({
            variables:{ boardId : "6263f038a8255b002988c134" },
            // 리페치쿼리 - 두번요청
            // refetchQueries:[
            //     {
            //         query: FETCH_BOARD,
            //         variables : { boardId : "6263f038a8255b002988c134" },
            //     },
            // ]

            // cache state 직접 수정하는 방법과 함께 쓸 수 있음
            optimisticResponse:{
                // 여기서 쓴 값은 아래 data. 으로 들어감
                likeBoard : (data?.fetchBoard.likeCount || 0 ) +1,
                // 기존에 있던 값 (없으면 0) +1
            },
            // cache state 직접 수정하는 방법
            update(cache, {data}){
                cache.writeQuery({
                    query :FETCH_BOARD,
                    variables:{boardId: "6263f038a8255b002988c134" },
                    data:{
                        fetchBoard:{
                            _id : "6263f038a8255b002988c134",
                            __typename: "Board",
                            // 위 두개 필수입력 이걸로 글로벌스테이트에서 구별
                            likeCount : data.likeBoard,
                        }
                    }
                })

            }
        })

    }
    
    return(
        <div>
            <h1>Optimistic UI</h1>
            <div>현재카운트(좋아요): {data?.fetchBoard.likeCount}</div>
            <button onClick={onClickOptimisticUI}>좋아요 올리기</button>
        </div>
    )
}

개발자의 컴퓨터는 빠르지만
사용자의 느린 컴퓨터를 고려해야 한다.

refetch로 하는 것보다 optimistic responce로 바꾸면 훨씬 바르게 결과를 볼 수 있다.