React 질의의 상태 확인

React 쿼리의 장점 중 하나는 쿼리의 상태 필드에 쉽게 접근할 수 있다는 것이다.검색이 불러오고 있는지 오류가 있는지 바로 알 수 있습니다.이를 위해 라이브러리는 일련의 브리 로고를 공개했는데, 이 로고들은 대부분 내부 상태기에서 나온 것이다.조회가 다음 상태 중 하나일 수 있습니다.

success: 조회가 성공했고 관련 데이터가 있습니다

error: 검색이 작동하지 않고 오류가 설정되었습니다

loading: 질의에 데이터가 없으며 현재 처음 로드 중

idle: 쿼리가 활성화되지 않았기 때문에 실행된 적이 없습니다.

isFetching 로고는 내부 상태기의 일부분이 아닙니다. 이것은 추가 로고로 요청이 진행될 때 진짜가 됩니다.너는 잡을 수도 있고, 성공할 수도 있고, 잘못할 수도 있지만, 동시에 불러올 수도 없고, 성공할 수도 없다.국가 기계가 이 점을 확보했다.
the types
표준 예
검색을 사용하지 않는 가장자리이기 때문에 빈 상태는 기본적으로 무시됩니다.그래서 대부분의 예는 다음과 같다.

const todos = useTodos()

if (todos.isLoading) {
    return 'Loading...'
}
if (todos.error) {
    return 'An error has occurred: ' + todos.error.message
}

return <div>{todos.data.map(renderTodo)}</div>

여기서, 우리는 우선 불러오기와 오류를 검사한 다음에 데이터를 표시합니다.어떤 용례에 대해서 말하자면, 이것은 좋은 것일 수도 있지만, 다른 용례에 대해서는 그렇지 않다.많은 데이터 획득 솔루션, 특히 수동으로 제작된 솔루션은 재식각 메커니즘이 없거나 현식 사용자의 상호작용만 재식각된다.
하지만 사실은 그렇다.
기본적으로, 이것은 매우 적극적으로 재식각을 할 뿐만 아니라, 사용자가 주동적으로 재식각을 요구하지 않을 것이다.REFETCONMOUNT, REFETCON Window Focus와 REFETCON Reconnect의 개념은 데이터의 정확성을 유지하는데 매우 도움이 되지만 이러한 자동 백그라운드 재부각이 실패하면 사용자 체험의 혼란을 초래할 수 있다.

배경 오류
많은 경우, 만약 배경의 재식각이 실패한다면, 그것은 묵묵히 무시될 수도 있다.하지만 위 코드는 이를 해낼 수 없다.두 가지 예를 살펴보겠습니다.

사용자가 페이지를 열어 초기 검색을 불러왔습니다.그들은 페이지에서 한동안 일한 후에 브라우저 옵션 카드를 바꾸어 전자 우편을 보았다.그들은 몇 분 후에 돌아와서 배경을 다시 그릴 것이다.잡는데 실패했으니

우리 사용자는 목록 보기가 있는 페이지에서 항목을 클릭하여 아래로 내려가 상세한 보기를 찾습니다.이것은 매우 좋아서 그들은 목록 보기로 되돌아갔다.다시 자세히 보기로 이동하면 캐시에 있는 데이터를 볼 수 있습니다.배경을 다시 부각하는 데 실패하지 않는 한 아주 좋다.

두 경우 질의는 다음과 같은 상태가 됩니다.

{
  "status": "error",
  "error": { "message": "Something went wrong" },
  "data": [{ ... }]
}

보시다시피, 우리는 오류와 낡은 데이터를 사용할 수 있습니다.이것이 바로 React Query의 강점이다. 그것은 유행이 지난 동시에 캐시 메커니즘을 재검증하는 것이다. 이것은 데이터가 유행이 지난 경우에도 데이터를 제공할 수 있다는 것을 의미한다.
지금은 우리가 무엇을 전시할지 결정할 때다.오류 표시가 중요합니까?만약 우리가 유행이 지난 데이터가 있다면, 유행이 지난 데이터만 표시하면 충분합니까?우리는 이 두 가지 상황을 동시에 표시하거나 작은 배경 오류 표시기를 사용해야 합니까?
이 문제는 명확한 답이 없다. 구체적인 용례에 달려 있다.그러나 상기 두 가지 예를 감안하면 잘못된 화면으로 데이터를 바꾸면 사용자 체험이 혼란스러울 것이라고 생각합니다.
React Query가 실패한 조회를 기본적으로 지수로 세 번 재시도할 때마다 더 중요하기 때문에 오래된 데이터를 오류 화면으로 바꾸는 데 몇 초가 걸릴 수 있습니다.만약 당신도 배경 추출 지표가 없다면, 이것은 정말 사람을 곤혹스럽게 할 것이다.
이것이 바로 내가 일반적으로 데이터 가용성을 먼저 검사하는 이유이다.

const todos = useTodos()

if (todos.data) {
    return <div>{todos.data.map(renderTodo)}</div>
}
if (todos.error) {
    return 'An error has occurred: ' + todos.error.message
}

return 'Loading...'

마찬가지로 무엇이 옳고 명확한 원칙이 없는지는 용례에 고도로 의존하기 때문이다.모든 사람은 적극적인 재식각이 가져온 결과를 의식해야 한다. 우리는 간단한 todo 예시를 엄격히 따르지 않고 코드를 구축해야 한다.😉.
특히 고맙다 는 먼저 나에게 왜 이런 상태 검사 모델이 어떤 상황에서 해로운지 강조했다.
만약 무슨 문제가 있으면 언제든지 저에게 연락하거나 아래에 메시지를 남겨 주십시오⬇️