React Query 412 error (1) code 작성 실수

1) 문제점

  delete api를 구현할 때 생긴 문제

const queryClient = useQueryClient();
const mutation = useMutation(addPost, {
  onSuccess: () => {
    queryClient.invalidateQueries('posts')
  },
  onError: () => {
    navigate('/');
  }
})

// 삭제 버튼
const deleteButton = (id) => {
  if (window.confirm('정말 삭제하시겠습니까?') === true) {
    deletePost(id);
    navigate('/');
    mutation.mutate('posts')    // 이 부분이 문제인 것 같음
  } else {
    return
  }
};

• mutation.mutate를 통해 Main 페이지에서 posts를 조회했던 부분을 무시하고 다시 조회하려고 코드를 위처럼 작성
• 새로 받아와지지 않고 412 에러 발생

검색했을 때 나온 에러 내용

• 전제 조건 실패
  • Request-header field에 하나 이상의 선결 조건에 대한 값이 서버에서 테스트 결과로 false가 나왔을 때 발생
  • 살펴볼 점 : request header 안에 요청을 처리하는 데 필요한 데이터가 충족하는지 확인
  • 백엔드 목 서버를 만들어주신 분에게 여쭤봤을 때, header 안에 필요한 값은 id 하나라 문제 없음

2) 해본 시도

1. 삭제 버튼의 mutate 부분 지우고 실행

// 삭제 버튼
const deleteButton = (id) => {
  if (window.confirm('정말 삭제하시겠습니까?') === true) {
    deletePost(id);
    navigate('/');
    // mutation.mutate('posts')
  } else {
    return
  }
};

• error는 생기지 않지만, 삭제되었을 때 main 페이지로 돌아가는데, posts 들이 갱신되지 않음

2. mutate로 넘겨준 값을 param.id 로 변경

// 삭제 버튼
const deleteButton = (id) => {
  if (window.confirm('정말 삭제하시겠습니까?') === true) {
    deletePost(id);
    navigate('/');
    mutation.mutate(param.id)		// 수정 부분
  } else {
    return
  }
};

• 맨 처음 에러인 412 에러와 동일한 문제 발생
• param.id 말고 그냥 id를 넘겼을 때도 동일한 문제 발생

3) 해결한 방법

const queryClient = useQueryClient();
  const mutation = useMutation(deletePost, {    // addPost로 되어있던 부분을 deletePost로 변경
    onSuccess: () => {
      queryClient.invalidateQueries('posts')
    },
    onError: () => {
      navigate('/');
    }
  })

// 삭제 버튼
const deleteButton = (id) => {
    if (window.confirm('정말 삭제하시겠습니까?') === true) {
      navigate('/');
      // deletePost(id);				// deletePost 삭제
      mutation.mutate(id)
    } else {
      return
    }
  };

• addPost가 되어있던 부분을 deletePost 부분으로 변경
• 삭제 버튼에 있었던 deleteTodo 부분을 지웠더니 해결

4) 알게된 점

  react-query의 기본적인 개념이 아직 많이 부족한 것 같음. react-query를 배운지 1주일도 안 되었기도 하고, 기본기를 탄탄하게 다지지 않아 기본적으로 어떻게 돌아가는지 찾아보고 숙지하는게 중요한 것 같음. 그래도 1주일만에 실력이 많이 늘게된 것 같아 더 열심히 하고, 더 많은 것들을 배우고싶어졌음