react query optimistic update

테이블에서 메모를 실시간으로 업데이트 해야 했다.

문제는 메모를 수정할 때, 잠깐동안 이전 데이터가 보였다가 수정된 데이터가 보였다.

 

예를 들어, 'abc'라는 상태에서 '가나다'로 메모를 수정하면 잠깐동안 'abc'로 데이터가 렌더링되었다가 patch가 완료되면 다시 '가나다'로 변경되는 식이었다.

 

원인은 데이터가 patch(이하 mutate) 되는 동안 아직 업데이트 되지 않은 데이터를 참조하기 때문이었다.

<Table
    data={list.map(item=>({
        ...data
        memo: <Memo item={item}/>
    }))}
/>

대략 이런 구조에서, 데이터를 mutate 할 때 수정된 데이터가 아닌 기존의 list를 참조하기 때문에 잠시 이전의 데이터가 나타났던 것이다. optimistic update를 통해 이 문제를 해결할 수 있었다.

 

optimistic update는 말 그대로 데이터 mutation이 성공할 것이라고 예상하고 화면 데이터를 우선 업데이트 하는 것이다. 만약 실패한 경우에는 기존의 데이터를 다시 가져오면 된다.

 

react query를 사용할 경우 onMutate를 이용해 mutation이 시작되는 시점을 포착해서, queryClient.setQueryData로 변경된 데이터를 반영해 주면 list를 항상 최신화된 상태로 유지할 수 있다.

 

참조) https://tanstack.com/query/v4/docs/guides/optimistic-updates