Next.js 프로젝트 트러블 슈팅 5

• 문제점 : 로테이션 페이지에서 버전정보를 가져와야 되는데 useQuery로 안불러와지는 이슈
• 해결방안 : 

const [version, setVersion] = useState("");

useEffect(() => {
   const version = async () => {
     const latestVersion = await fetchVersion();
     setVersion(latestVersion);
   };
   version();
 }, []);

 

useState랑 useEffect로 데이터를 불러오는건 성공했는데 내가 원하는건 탠스텍쿼리로 데이터를 불러오는것!

 

const { data: version } = useQuery({
    queryKey: ["version"],
    queryFn: async () => await fetchVersion(),
  });
  
  console.log("la", version);

 

처음에 이렇게 가져왔는데 안됨 ㅠㅠ 콘솔도 아예 안찍혔다ㅜㅜ

근데 원인을 알고보니 로딩이 되기 전엔 데이터 정보가 불러와지지 않아서 콘솔에도 데이터가 찍히지 않고 아예 데이터가 안 불러와진것! 

 

  const { data: version, isPending: isVersionPending } = useQuery({
    queryKey: ["version"],
    queryFn: async () => await fetchVersion(),
  });

 

그래서 isPending을 추가해줌. 그럼 데이터가 로딩 되는동안 데이터가 불러와지고 화면이 로딩된다. 

 

  const { data: version, isPending: isVersionPending } = useQuery({
    queryKey: ["version"],
    queryFn: async () => await fetchVersion(),
  });
  // console.log("la", version);


  if (isChampionPending || isVersionPending) {
    return (
      <div className="flex justify-center items-center text-6xl">
        Loading...
      </div>
    );
  }

 

로딩 페이지를 띄워주고 그동안에 데이터를 불러오면 됨!!!