낙관적 업데이트 & finally()

 

 

낙관적 업데이트

 

 

=> 서버에 요청을 보내고 받기 전에

 

요청되었을 거라 낙관적으로 판단-> 빠르게 UI 그리기 

 

를 위해 바뀐 데이터를 get하기 전 미리 UI를 그리는 것

 

예를 들면 todoList 만들 때 삭제 후 전체데이터에서 삭제된 데이터만 빼고(filter 사용) UI를 그리는 것

 

 

 

 

리액트 쿼리가 사기라더니

리액트 쿼리는 낙관적 업데이트도 해준다고 한다

 

 

 

 

 

useMutation 사용하는 건데

 

 

 

혹시 그 사이 발생할지 모르는 리패치를 취소 시킴 

 

미리 업데이트 전 데이터를 변수에 담아놓고 (요청이 잘못될 수도 있으니까)

 

setQueryData 를 이용해 쿼리를 업데이트 해줌 (todolist add라 했을 때 스프레드)

=> 서버 응답이 오기 전에 UI를 미리 업데이트함

 

요청이 잘못될 시 => onError가 캐싱해놓은 데이터로 복원

 

 

 

그리고 의문...

 

🤔

 

이게 왜...  큰 장점인거지... 전 데이터 담아놓고 업데이트 데이터 뿌려주는 건 굳이 쿼리 안 써도 되는 거 아닌가... 

 

 

 

 

 

 

그리고 열심히 코드 구경하다가

딴 길로 새서 promise 관련된 코드를 봄

 

 

 

 

finallly()

 

  const getTodos = () => {
    setIsLoading(true);
    todoController
      .getTodos()
      .then(handleFetchTodos)
      .catch(handleTodoError)
      .finally(() => setIsLoading(false));
  };

출처 : https://80000coding.oopy.io/b0655b92-43e8-435b-97a6-244fbf875637

 

 

 

 

 

요청 성공/실패 상관 없이 로딩창이 꺼지는 코드였음

 

 

 

 

 

 

 

mdn에 적혀있는 친절한 예제...

 

let isLoading = true;

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); })
  .finally(function() { isLoading = false; });

 

 

쿼리로 따지자면

onSettled