[React-Query]Optimistic Updates로 빠른 UI제공하기

유저가 설정 상태를 변경하면

프론트엔드에서 put으로 백엔드 api를 요청하고 해당 요청이 성공하면 유저에게 성공한 UI를 보여줌으로써 상태가 변했음을 보여준다.

clickEvent -> Request -> success -> Response -> state update

clickEvent -> Request -> fail -> Response -> error handling

서버상태를 제대로 반영하기 위해 response를 확인하고 UI를 업데이트시켰다.

서버상태와 브라우저 상태가 일치하므로 정확한 데이터를 보여줄 수 있지만

api가 반응하기까지 프론트엔드 상태변경이 이루어지지 않아서 유저가 보기엔 반응이 '느린 것처럼' 느껴졌다. 

 

이럴 때 사용할 수 있는 기술이 Optimistic Updates이다.

말 그대로 낙관적으로 업데이트를 하는 것이다.

예를 들면

'요청이 성공하면 상태를 업데이트해라'가 아니라 '요청이 성공할 것으로 예상되니 일단 업데이트부터 해라' 같은 느낌이 되겠다.

그럼 만약에 실패하면? 일단 성공할 것으로 예상하고 업데이트했다가 실패하는 res를 받게 되면 다시 되돌린다.

Optimistic Updates를 구현할 수 있는 기술이 많이 있지만, 이 글에서는 react query로 구현한다.

 

변경 전

mutate함수를 실행한 뒤에 성공하면 그 데이터를 받아서 프론트엔드 상태를 업데이트한다.

비동기처리를 해야 하기 때문에 mutateAsync를 반환받아서 사용했다.

 

변경 후 

onMutate는 useMutation의 쿼리함수인 alarmAPI.putMyAlarmConfigState() 함수가 실행되기 전에 실행되는 옵션이다.

 

cancelQueries에 쿼리키를 전달한다. 혹시 모를 refetch를 방지하여 Optimistic Updates 데이터를 덮어쓰지 않도록 방지한다.

 

getQueryData에 쿼리키를 전달해서 현재의 데이터(수정 전)를 가져와서 변수에 저장한다. 혹시 실패할 경우를 대비하여 롤백시킬 데이터를 변수에 담아두는 것이다.

 

setQueryData()에 쿼리키와 업데이트하고 싶은 데이터를 전달해서 일단 해당하는 쿼리키에 데이터를 업데이트한다. 함수 형식으로 전달하면 되고, 위 코드에서 newData는 mutate메서드의 매개변수가 된다. 즉, 변경하고자 하는 데이터를 onMutate에서 먼저 사용하는 것이다.

여기까지 하면 낙관적 업데이트가 완료된 상태이다.

이 뒤로는 혹시 모를 실패에 대비한다.

 

onMutate 옵션이 이전에 변수에 저장해 놓은 previousData를 리턴하는데, 이것은 onError옵션의 매개변수로 전달된다.

onError함수에서 세 번째 매개변수로 전달되는 context를 받고, 만약 실패하면 setQueryData로 previousData를 세팅해 준다.

 

onSettled 옵션은 성공, 실패 둘다에서 실행되는데, 공식문서에 따르면 쿼리키를 무효화시켜서 안전하게 서버상태와 일치시키기 위함이다.

 

일부러 에러를 발생시켜서 혹시 모를 실패 시에 롤백되는 모습까지 확인해 보자

onMutate에서 낙관적으로 상태를 변경시켰다가, 실패하니까 onError에서 즉시 롤백시키면서 다시 버튼이 제자리로 돌아온다.

빠르게 롤백하는 모습이 귀엽다.

https://tanstack.com/query/latest/docs/react/guides/optimistic-updates?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Foptimistic-updates

 

Optimistic Updates | TanStack Query Docs