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

Question

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 링크

Kyo · Answer

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

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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 를 통해 보다 심층적인 내용을 학습할 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.