54-55강 수정 내용 관련 질문

아바타 커뮤니티앱 만들기 (React Native Expo)

[Note] 낙관적 업데이트 수업 중 수정사항 안내

작성

54강 강의 노트에서 수정 버전으로 작성 시 오히려 에러가 발생하여 질문드립니다! 수정 전에 오히려 문제가 없었는데, 수정 후 발생한 문제에 대해 어떻게 해결하면 좋을 지 답변주시면 정말 감사하겠습니다:)

<에러 메시지>

'context.previousPost'은(는) 'undefined'일 수 있습니다.ts(18048)

react-native typescript expo react-hook-form react-query

답변 3

Kyo

지식공유자

에러가아니라 타입경고 아닌가요?? context?.previousPost?.id 로 해도 될것같습니다.
또는 id가 있을때로 조건을 추가해보시겠어요?

   onError: (err, newPost, context) => {
      if (context?.previousPost?.id) {
        queryClient.setQueryData(
          [queryKeys.POST, queryKeys.GET_POST, context.previousPost.id],
          context?.previousPost
        );
      }
    },

gownsrkt11

질문자

context?.previousPost?.id 로 진행하면 문제는 없으나, 강의 수정 자료에 올려준 그대로 해봤을 때 문제가 생겨서 질문 남겼습니다!

context?.previousPost?.id로 진행해서 계속 수강해보겠습니다.

Kyo

지식공유자

또는 onMutate내부에서 previousPost없으면 리턴하는 방법도 있습니다. 이렇게하면 context?.previousPost.id 그대로 사용하실수있습니다!

 const previousPost = queryClient.getQueryData<Post>([
        queryKeys.POST,
        queryKeys.GET_POST,
        postId,
    ]); 
if (!previousPost) return;

gownsrkt11

질문자

54강 강의 내용대로 수정을 해보고 싶은데, AI 인턴이 제시한 솔루션 외에는 방법이 없을까요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. gownsrkt11님.

React Query를 사용하여 useLikePost 함수를 구현하신 것에 대한 문제로 보이는데요, 주어진 에러 메시지는 ‘context.previousPost’가 undefined일 수 있다는 경고를 전달하고 있습니다. 이는 주로 onError 콜백에서 이전의 상태를 롤백할 때 발생할 수 있는 문제입니다.

문제 원인

onError 함수는 매개변수 context를 사용하여 이전 상태를 복원합니다. context에 previousPost가 존재하지 않으면, 이는 undefined가 되어 문제가 발생합니다.

해결 방법

초기화된 Context: onMutate 콜백에서 반환되는 context 객체가 올바르게 설정되었는지를 확인해주세요. context 객체는 주로 onMutate가 실행될 때 갖고 있는 상태를 반환합니다.
안전한 접근 방법 사용:
- 옵셔널 체이닝(?.) 또는 논리 연산자(&&)를 사용하여 context.previousPost를 안전하게 확인해 보세요.

예를 들어:

onError: (err, variables, context) => {
  if (context?.previousPost) {
    queryClient.setQueryData(
      [queryKeys.POST, queryKeys.GET_POST, context.previousPost.id],
      context.previousPost,
    );
  }
},

초기 Context 설정: onMutate에서 context를 명확하게 초기화하는 것도 방법입니다.

추가 학습 자료

관련 질문과 답변 또는 강의 자료를 참조하여 React Query의 낙관적 업데이트와 오류 처리 방식에 대해 더 깊이 이해하는 데 도움이 될 수 있습니다.

다음과 같은 유사한 질문을 통해 보다 자세한 정보를 얻을 수 있습니다:
- React Query 낙관적 업데이트에서 발생할 수 있는 에러 처리 문제.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변