인프런 커뮤니티 질문&답변
작성한 질문수
[5-13] useLikePost 쿼리 에서 onError 부분 key 코드 오류입니다.
해결된 질문
작성
·
104
·
수정됨
0
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
답변 2
1
말씀해주신것처럼 context가 아닌, context?.previousPost.id를 넣어주어야 하는것이 맞습니다. updater자리에는 context?.previousPost를 잘 사용해놓고 실수를 했네요. 제보해주셔서 감사드립니다!!
1
안녕하세요, 인프런 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 update 문서를 참조하면, optimistic updates 및 오류 핸들링에 대한 유용한 정보를 얻을 수 있습니다. 비슷한 상황을 다룬 예제가 해당 문서에 잘 설명되어 있습니다.
추가 자료
- 공식 문서 - Optimistic Updates를 통해 보다 심층적인 내용을 학습할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.