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

사당동

작성한 질문수

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

[5-13] 낙관적 업데이트(Optimistic Update) 적용하기

[5-13] useLikePost 쿼리 에서 onError 부분 key 코드 오류입니다.

해결된 질문

작성

111

수정됨

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

queryKey array index 2에 context 말고, context?.newPost.id 가 들어가야할 것 같아요

context 안에 newPost previousPost 객체가 들어있어서 다른 key 가 생성됩니다.

REF

링크

javascript react react-native typescript react-query

답변 2

Kyo

지식공유자

말씀해주신것처럼 context가 아닌, context?.previousPost.id를 넣어주어야 하는것이 맞습니다. updater자리에는 context?.previousPost를 잘 사용해놓고 실수를 했네요. 제보해주셔서 감사드립니다!!

인프런 AI 인턴

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

질문해주신 부분에 대해 확인해 보았습니다. React Query에서 onError 를 통해 오류가 발생했을 때 쿼리 데이터를 어떻게 롤백할지 결정하는 것은 중요한 부분입니다. 현재 코드에서 context?.newPost.id 를 queryKey의 일부로 사용하는 구조를 이해하고 계신 것 같아 다행입니다.

현상 설명:

queryClient.setQueryData 메서드에서 사용 중인 쿼리 키의 세 번째 항목에 context?.newPost.id 를 올바르게 입력하여 기존의 post에 대한 데이터를 롤백하려는 의도 같습니다.

주의사항:

타입 명확성:
- context 객체는 onMutate 단계에서 반환되며, 이때 newPost 와 previousPost 가 있는지 확실히 해야 합니다. context 의 구조가 의도대로 정의되어 있는지 확인하세요.
옵션 처리:
- context 객체가 null일 수 있으므로 안전하게 접근해야 하는데, 이는 질문에서 사용하신 코드처럼 optional chaining을 사용해 안전하게 접근하고 계십니다.
참고 자료:
- 관련해서 optimistic update 문서를 참조하면, optimistic updates 및 오류 핸들링에 대한 유용한 정보를 얻을 수 있습니다. 비슷한 상황을 다룬 예제가 해당 문서에 잘 설명되어 있습니다.

추가 자료

공식 문서 - Optimistic Updates를 통해 보다 심층적인 내용을 학습할 수 있습니다.

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

사당동

작성한 질문수

전체 Q&A

질문하기