React 쿼리의 초기 쿼리 데이터

사용자의 데이터 가져오기/보기 경험을 개선할 수 있는 또 다른 방법은 구성 옵션에서 초기 쿼리 데이터를 useQuery 후크에 제공하는 것입니다. 왜 필요한지 먼저 생각해보자.

끝점/companies에 도달하면 각 회사가 다음과 같은 회사 목록을 얻습니다.

{
    "id": 1,
    "name": "Microsoft",
    "ceo": "Satya Nadela"
}

이제 다음과 같은 회사가 있는 회사의 세부 정보를 가져오는 또 다른/companyDetails 끝점을 고려하십시오.

{
    "id": 1,
    "name": "Microsoft",
    "ceo": "Satya Nadela",
    "founder": "Bill Gates",
    "headQuarters": "Redmond, Washington, United States"
}

name , id 및 ceo 와 같은 일부 데이터는 위의 두 회사 개체 간에 공통입니다.

이제 useQuery 후크를 사용하여 /companyDetails 끝점을 사용하여 회사 세부 정보를 가져옵니다.

const fetchCompanyDetails = ({ queryKey }) => {
  const id = queryKey[1];
  return fetch(`http://localhost:4000/companyDetails/${id}`).then((response) =>
    response.json()
  );
};

const { 
    isLoading, 
    data: companyDetails 
} = useQuery(["company-details", id], fetchCompanyDetails);

참고: 테스트 목적으로 Chrome Devtools의 네트워크 탭에서 네트워크 제한을 느린 3G로 설정했습니다.



위의 내용에서 사용자가 회사 이름을 클릭할 때마다 로드 상태가 표시된 다음 완전한 회사 세부 정보가 사용자에게 표시된다는 것을 알 수 있습니다.intialData가 도움이 될 수 있습니다. 이미 캐시된 정보를 사용자에게 표시하여 로드 상태가 사용자에게 표시되는 것을 방지하여 전반적인 데이터 가져오기/보기 경험을 향상시킵니다.

이제 초기 쿼리 데이터가 필요한 이유를 알았으므로 사용 방법을 살펴보겠습니다.

import React from "react";
import { useParams } from "react-router-dom";
import { useQuery, useQueryClient } from "@tanstack/react-query";

const fetchCompanyDetails = ({ queryKey }) => {
  const id = queryKey[1];
  return fetch(`http://localhost:4000/companyDetails/${id}`).then((response) =>
    response.json()
  );
};

const Company = () => {
  const { id } = useParams();
  const queryClient = useQueryClient();

  const {
    isLoading,
    data: companyData,
  } = useQuery(["company-details", id], fetchCompanyDetails, {
    initialData: () => {
      const cachedCompanyData = queryClient
        .getQueryData("companies")
        .find((cachedCompany) => cachedCompany.id === parseInt(id));
      console.log({ cachedCompanyData });
      return cachedCompanyData ? cachedCompanyData : undefined;
    },
  });

  if (isLoading) {
    return <h1>loading</h1>;
  }

  return (
    <div>
      <h2>name: {companyData.name}</h2>
      <h2>ceo: {companyData.ceo}</h2>
      <h2>founder: {companyData.founder}</h2>
      <h2>headquarters: {companyData.headQuarters}</h2>
    </div>
  );
};

export default Company;

우리는 initialData 구성을 함수인 useQuery 후크에 제공할 수 있습니다. 이 함수에서 반환하는 것은 무엇이든 페이지의 초기 데이터로 사용되지만 undefined 반환하면 쿼리가 반응하여 앱을 하드 로딩 상태로 설정합니다. 전체 데이터를 가져와서 오류를 방지합니다.

우리의 경우에는 이미 사용자에게 표시할 데이터가 있으므로 queryClient.getQueryData("companies")를 사용하여 캐시에서 해당 데이터를 가져옵니다. 그러면 id를 사용하여 클릭한 회사를 찾기 위해 검색 작업을 수행하는 회사 목록이 반환됩니다. 캐시가 비어 있는 경우 useParams 후크를 사용하여 액세스할 수 있으며 undefined 그렇지 않으면 캐시된 회사 데이터를 반환합니다. 결과는 다음과 같습니다.



이번에는 로드 상태가 표시되지 않고 백그라운드에서 데이터를 가져오는 동안 사용자에게 캐시된 정보가 표시되고 완료되면 마치 이동 중에 가져오는 것처럼 표시되는 방식에 유의하십시오.

읽어 주셔서 감사합니다!

다음 강의에서는 모든 프런트엔드 개발자가 직면한 페이지 매김 및 무한 쿼리를 수행하는 가장 일반적인 UI 패턴 문제 중 하나를 다룰 것입니다.
우리는 React Query가 그러한 작업을 수행하는 것을 얼마나 쉽게 만드는지 알게 될 것입니다.

언제든지 연락주세요! 😊

💻 Github 💌 Email

그때까지 행복한 코딩!