react 조회를 사용하여 더 깨끗한 데이터 가져오기

나는 데이터 획득이 세계의 상태 관리처럼 중시되고 주목받지 않는다고 생각한다.사람들은 일반적으로 클라이언트 기기의 상태와 서버 상태를 상태 관리 솔루션에 결합시킨다.서버 상태란 백엔드 서버에서 온 데이터를 가리킨다.예를 들어redux 설정에서 클라이언트 상태와 서버에서 온 데이터가 저장소에 저장되고 업데이트는 조작과 복원 프로그램을 통해 처리된다.클라이언트 상태의 변화는 일반적으로 서버 상태의 변화를 초래하기 때문에 대다수 상황에서 그것들을 결합시키는 것은 의미가 있다.그러나 나는 두 개의 독립된 실체라고 생각한다. 만약에 적절하게 처리한다면 우리는 심지어 어떤 상황에서 클라이언트 상태 관리 솔루션에서 벗어날 수 있다.
나는 클라이언트와 서버 상태 관리를 분리하는 해결 방안을 찾기 시작했다.한 가지 측면에서React세계를 보면 서버 데이터를 서비스에 저장하고 구성 요소에 주입하는 간단한 것을 원합니다. 그러면 됩니다.React에서 여러 구성 요소에서 데이터를 얻으려면 전역 상태 관리 솔루션을 유지해야 합니다.

구원에 반응하다

그리고 나는 실행 데이터 획득과 서버 상태를 유지하는 라이브러리를 연구했다.내가 걸렸어react-query,펑!그것은 내가 필요로 하는 모든 것이 있고, 더 많다.그것은 서버 상태를 유지하는 전역적인 상하문 방법을 제공하고 최소한의 우수한 캐시 솔루션을 제공한다.그리고 swr 역시 최고예요.

예.

됐어, 잡담은 그만해.코드를 봅시다.다음은 제가 일반적으로 React 프로젝트를 설정하는 방법입니다.나는 pages 이라는 폴더가 있는데, 그 안에 모든 최고급 노선이 있다.components 폴더에는 서버측 API를 포함하는 모든 UI 구성 요소와 api라는 이름의 폴더가 있습니다.
만약 우리가 제품 실체를 가지고 있다면.하나의 제품은 모든 때가 낀 조작을 덧붙였다.따라서 제품에 다음과 같은 API 호출이 필요합니다.

1. Fetch all products
2. Fetch a specific product
3. Add a new product
4. Edit a product
5. Delete a product

react-query는 우리에게 useQuery 갈고리를 제공했는데 우리는 그것을 사용하여 모든 조회를 할 수 있다.이것은 상술한 목록의 첫 번째 점과 두 번째 점을 포함해야 한다.
우리는 포장useQuery을 통해 제품에 자신의 데이터를 만들어 연결할 것이다.api/product.js의 제품 파일은 다음과 같습니다.

데이터 획득 함수를 설정하는 방법react-query을 살펴보자.

물건을 찾다

제품을 얻는 것부터 시작합시다.useQuery의 기본적인 실현은 다음과 같다.

이곳에서 발생한 일은 많지 않다.우리는 유일한 idkey를 첫 번째 매개 변수로 useQuery에 전달하고fetch 함수를 전달하여 실제 API 호출을 진행한다.
만약 우리가 구성 요소에서 그것을 사용하고 싶다면, 우리는 이렇게 할 수 있다

It gives us loading and error states which I think is neat

우리는 작업 데이터 획득 설정이 하나 있지만, 기능 집합은 여기에서 끝나지 않았다.모든 목록 페이지에는 search, filters, pagination, Products 등 추가 기능이 있습니다. 이것은reactquery가 이러한 기능을 추가하는 것을 매우 간단하게 하는 부분입니다.우리들은 이 물건들을 준비합시다.

페이지 나누기

page 어셈블리에서는 limit 및 page 값을 상태로 사용할 수 있습니다.limit는 현재 페이지 번호를 나타내고 useFetchProducts는 페이지에 표시할 제품의 수량을 나타낸다.

다음 단계는 이것과 우리useFetchProducts를 연결하는 것이다.갈고리page와 limit를 매개 변수로 받아들이도록 하겠습니다.

여기서 일어난 일을 말해 봅시다.useFetchProducts 갈고리는 현재 page와 limit를 매개 변수로 받아들인다.또한 이 두 요소를 key에 추가하고 URL을 가져올 때 추가합니다.
위대하다이렇게우리는 지금 이미 페이지를 나누는 것을 실현했다.이제 page 구성 요소의 limit 및 Products 값이 변경될 때마다 react query는 API 요청을 자동으로 트리거하고 UI를 업데이트합니다.

수색하다

또 다른 중요한 공통점은 검색이다.따라서 제품스에 검색 name 필드를 추가합니다.당신이 이미 짐작한 바와 같이, 이것은 페이지를 나누는 과정과 완전히 같다.state에 name 필드가 있는데, 이state 값은 useFetchProducts 갈고리에 전달됩니다.

우리useFetchProducts는 이렇게 보인다.

이와 유사하게, 우리는 임의의 필터/검색 매개 변수를 out useFetchProducts hook에 연결할 수 있다.이 갈고리는 전역 상태 관리 시스템이 필요 없이 여러 개의 구성 요소에 걸쳐 사용할 수 있다.

캐시

캐시는reactquery에서 내가 가장 좋아하는 기능입니다.최소한의 코드로 우리는 강력한 캐시 시스템을 세울 수 있다.우리의 제품을 예로 들면, 우리의 제품이 10초 동안 캐시되기를 희망한다고 가정하자.우리는 staleTime 옵션을 추가해서 이 점을 실현할 수 있다.

언제든지 같은 page, limit, name를 사용하여 이 갈고리를 호출하면 캐시에 있는 데이터를 사용합니다.

An important thing to understand here is the key option. The key uniquely identifies a request. So, a request with page as 1 is not the same as a request with page as 2. The value from the cache will only be used all three key values are same.

내부 캐시 업데이트

react-query 또한 내부 캐시에 액세스할 수 있습니다.우리는 언제든지 이 캐시를 업데이트할 수 있다.즉, 개별 제품의 내부 캐시 값을 설정할 수 있습니다.
제품 목록을 가져와 화면에 표시했다고 상상해 보세요.사용자가 제품을 클릭하면 우리는 그들을 제품 화면으로 데리고 간다.제품 화면에서 우리는 반드시 제품의 상세한 정보를 얻어서 표시해야 한다.하지만!reactquery의 내부 캐시에 제품에 대한 자세한 정보가 있습니다.만약 우리가 그것을 써서 API 호출을 대체할 수 있다면?
먼저 useFetchProduct 갈고리를 만들어서 단일 제품을 얻읍시다.

여긴 미친 일 없어.우리가 이전에 한 것과 차이가 많지 않고, 단지 id를 하나의 매개 변수로 삼을 뿐이다.
여기서 주의해야 할 중요한 점은 ['product', id]를 키로 하는 것이다.제품의 id 를 키로 연결합니다.
이제 흥미로운 부분을 살펴보겠습니다. 우리는 제품 목록을 얻을 때마다 모든 제품의 값을 사용하여 내부 캐시를 설정합니다.react-query 갈고리useQueryClient가 노출되어 내부 캐시를 제공합니다.

제품 목록이 성공적으로 검색될 때마다 API 응답이 있는 함수onSuccess가 호출됩니다.우리는 모든 제품을 순환하고 setQueryData 방법을 사용하여 캐시에 저장합니다.
이제 사용자가 제품 목록 페이지에서 개별 제품 페이지로 이동할 때마다 API 호출이 아닌 캐시 값이 사용됩니다.

결론

그래서 나는reactquery가 매우 간단하고 강력한 데이터 획득 솔루션이라는 것을 발견했다.reactquery를 사용한 후, 나는 심지어 일부 항목에서 전역 상태 관리 솔루션을 삭제했다.그들을 사랑하라repo
건배!