오프라인 반응 조회

나는 이미 한 번 또 한 번 말했다. React 조회는 하나이다. async state manager.네가 그것에게 약속을 하기만 한다면, 결심이든 거절이든, 도서관은 모두 즐겁다.이 약속이 어디에서 왔든
약속을 실현하는 방법은 많지만 지금까지 가장 큰 용례는 데이터 획득이다.일반적으로, 이것은 활동적인 네트워크 연결이 필요하다.그러나, 특히 네트워크 연결이 신뢰할 수 없는 모바일 기기에서는 프로그램이 없는 상황에서도 작동할 수 있도록 해야 할 때가 있다.

질문
React Query는 오프라인 장면을 처리하기에 적합합니다.캐시가 가득 차면 네트워크 연결이 없어도 계속 작업을 할 수 있는 캐시층을 제공하기 때문이다.v3가 예상대로 작동하지 못하는 두 가지 변두리 상황을 살펴봅시다.기본 게시물 목록/게시물 상세 정보example from the docs를 사용하여 설명하겠습니다.

1) 캐시에 데이터가 없음
내가 말한 바와 같이 v3에서는 캐시가 가득 차면 일이 정상적으로 작동할 수 있다.변두리 사례에서 일이 이상하게 변하는 장면은 다음과 같다.

네트워크 연결 상태, 목록 보기로 이동

연락이 끊겼으니 댓글을 클릭하세요.

연결을 다시 받기 전까지 검색은 계속 불러오는 상태입니다.브라우저 devtools에서 실패한 네트워크 요청을 볼 수 있습니다.React 쿼리는 항상 첫 번째 요청을 트리거하기 때문에, 실패하면 네트워크 연결이 없으면 다시 시도를 중단합니다.
또한 React Query Devtools는 검색이 올바르지 않다는 것을 보여줍니다.검색은 사실상 중단되었지만, 우리는 이 상태의 개념을 표시하지 않았다. 이것은 숨겨진 실현 세부 사항이다.

2) 재시도 없음
이와 같이 위 장면에서 재시도를 완전히 닫으면 조회는 즉시 오류 상태로 들어가 멈출 수 없습니다.

네트워크 연결이 없는 경우 질의를 일시 중지하려면 재시도가 필요한 이유🤷‍♂️?

3) 네트워크가 필요 없는 쿼리
네트워크 연결이 필요하지 않아도 작동할 수 있는 검색 (예를 들어 웹 워크맨에서 비싼 비동기 처리를 했기 때문에) 은 다른 원인이 실패하여 네트워크 연결을 다시 얻을 때까지 중단됩니다.또한 네트워크 연결이 없으면 이 기능은 완전히 비활성화되기 때문에 이 검색은 window focus에서 실행되지 않습니다.
한 마디로 하면 두 가지 주요 문제가 있다. 어떤 경우 React Query는 네트워크 연결이 필요하지 않을 수도 있는 상황에서 네트워크 연결이 필요할 수도 있고 (상황 3) 다른 상황에서 React Query는 검색을 촉발해서는 안 된다고 가정한다(상황 1과 2).

새로운 네트워크 모드
v4에서, 우리는 새로운networkMode 설정을 통해 이 문제를 전면적으로 해결하려고 시도한다.이것으로 우리는 온라인과 오프라인으로 나누어 조회할 수 있다.이것은 useQuery와 UseVariation의 옵션입니다. 이것은 전역적으로 설정할 수도 있고, 모든 조회를 바탕으로 설정할 수도 있습니다.네트워크 연결이 필요한 검색어가 있을 수도 있고, 필요하지 않은 검색어가 있을 수도 있습니다.

온라인
이것은 대부분의 사용자가 React Query와 데이터 가져오기를 결합해서 사용하기를 원하기 때문에 v4의 새로운 기본 모드입니다.간단히 말해서, 이 설정을 사용할 때, 검색은 활성 네트워크 연결이 있는 상태에서만 실행될 수 있다고 가정합니다.
그렇다면 네트워크 연결이 없는 상황에서 네트워크 연결이 필요한 검색을 실행하려면 어떤 일이 일어날까요?질의가 일시 중지됩니다.일시 중지 상태는 질의가 유휴 상태, 로드, 성공 또는 오류일 수 있습니다. 네트워크 연결이 끊어질 수 있기 때문입니다.
이것은 데이터를 성공적으로 얻었지만 백그라운드 재부각이 중단된 경우, 예를 들어, 데이터를 성공적으로 얻었을 때, 성공한 상태에서 멈출 수 있음을 의미합니다.
또는 질의를 처음 로드하면 로드 상태에서 일시 중지할 수 있습니다.

상태 가져오기
검색이 실행 중임을 표시하기 위해 isFetching 로고를 사용해 왔습니다.새로운 일시 정지 상태와 유사하게 검색은 success and fetching일 수도 있고 error and fetching일 수도 있습니다.배경 다시 그리기는 당신에게 많은 가능한 상태를 제공한다.👋 국가 기관.
fetching과paused는 서로 배척되기 때문에, 우리는 그것들을 새fetchStatus에 조합하여, 지금useQuery에서 되돌려줍니다.

fetching: 조회가 실제로 실행 중입니다. 요청이 진행 중입니다.

paused: 질의가 실행되지 않았습니다. - 연결이 재개될 때까지 질의가 일시 중지됩니다.

idle: 조회가 현재 실행되지 않았습니다.

경험에 따르면 조회의 상태는 귀하께 데이터에 대한 정보를 제공할 것입니다. 성공은 귀하가 항상 데이터를 가지고 있다는 것을 의미하고, 불러오는 것은 귀하가 아직 데이터가 없다는 것을 의미합니다.나는 마운트 상태를 pending으로 바꾸는 것을 고려한 적이 있지만, 아이고, 이것은 너무 어려울 수도 있다.😅
한편,fetchStatus는queryFn에 대한 정보를 제공합니다. 실행 중입니까?isFetching와 isPaused 표지는 이 상태에서 기원한다.
위의 case 1가 v4에 있는 모습을 보여 주세요.RQ 개발 도구의 새 네트워크 모드 전환 버튼을 참고하십시오.이것은 매우 멋있다. 왜냐하면 실제로는 당신의 네트워크를 닫지 않았기 때문이다. 그것은 단지 React Query로 하여금 테스트 목적이 없는 네트워크를 믿게 할 뿐이다.네, 자랑스러워요.😊

새로운 보라색 상태 표지 때문에, 우리는 조회가 (일시 정지) 상태에 있는 것을 똑똑히 볼 수 있다.또한 네트워크를 다시 열면 첫 번째 네트워크 요청을 보냅니다.

언제나
이 모드에서 React Query는 네트워크 연결에 전혀 관심이 없습니다.조회는 항상 발송되며, 영원히 멈추지 않습니다.이 기능은 React 쿼리를 사용하여 데이터 가져오기 이외의 작업을 수행할 경우 유용합니다.

오프라인 우선
이 모드는 v3에서 React Query와 매우 비슷합니다.첫 번째 요청이 항상 실행되고 실패하면 다시 시도가 일시 중지됩니다.이 모드는 추가 캐시 레이어(예: React Query 상단의 브라우저 캐시)를 사용하려는 경우에 유용합니다.
GitHub repo API를 예로 들겠습니다.다음 응답 헤더를 보냅니다.

cache-control: public, max-age=60, s-maxage=60

이것은 다음 60초 동안 이 자원을 다시 요청하면 응답이 브라우저 캐시에서 온다는 것을 의미합니다.가장 좋은 것은 그것이 네가 오프라인 상태에서도 일할 수 있다는 것이다.서비스 인원(예를 들어 foroffline first PWAs)도 비슷한 방식으로 네트워크 요청을 차단하고 캐시 응답을 제공한다.
이제 React Query가 네트워크 연결이 없으므로 요청을 보내지 않기로 결정하면 기본 온라인 모드와 마찬가지로 이러한 작업이 작동하지 않습니다.요청을 캡처하려면 다음과 같은 작업을 해야 합니다. 따라서 이 추가 캐시층이 있다면, offline First network Mode를 사용하십시오.
첫 번째 요청이 나오면 캐시를 눌렀습니다. 다행입니다. 검색이 성공할 것입니다. 데이터를 얻을 수 있습니다.캐시가 명중되지 않으면 네트워크 오류가 발생할 수 있으며 나중에 React Query가 다시 시도를 일시 중지하고 질의를 일시 중지합니다.이것은 쌍방이 모두 좋게 하는 것이다.🙌

이 모든 것이 나에게 도대체 무엇을 의미하는가?
아니야, 네가 원하지 않으면.새fetchStatus를 무시하고 isLoading-React Query의 행동만 검사할 수 있습니다. (알겠습니다. 위의 - case 2 는 네트워크 오류를 보지 않기 때문에 더 잘 일할 수 있습니다.)
그러나 만약 응용 프로그램이 네트워크 연결 없이 건장하게 유지되는 것이 가장 중요한 임무라면 노출된 상태에 대해 반응하고 해당하는 행동을 취할 수 있다.
네가 이 새로운 신분을 어떻게 처리하는지는 너 자신에게 달려 있다.나는 어떤 사용자 체험 인원이 이 기초 위에서 구축될 것인지를 보고 매우 기뻤다.🚀
오늘은 여기까지.언제든지 연락 주세요.
만약 당신에게 어떤 문제가 있거나, 아래에 평론을 남겨라⬇️