[React Query] TypeScript로 getQueryState 사용하기

 

TypeScript로 getQueryState 사용하기

 

---

 

React Query를 이용해 App.js에서 다음과 같이 API 데이터를 받아왔다.

 

// App.js
const query = useQuery("dataName", async () =>
    (
      await fetch(
        "https://API 링크"
      )
    ).json()
  );

 

App.js가 아닌 다른 페이지에서 해당 데이터를 받아오려면 getQueryState를 이용하면 된다.

공식문서 : https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetquerystate

QueryClient | TanStack Query Docs

 

//App.js가 아닌 다른 파일

import { useQueryClient } from "react-query";
  
const queryClient = useQueryClient();
const query = queryClient.getQueryState("dataName");
 
useEffect(() => {
  if (query.status === "success" && query.data) {
    console.log(query.data.culturalEventInfo.row);
  }
}, [query.status]);

 

 

# TypeScript로 타입 지정하기

 

TypeScript를 이용한다면 다음과 같이 interface로 타입을 선언하고 asQueryType으로 타입을 지정한다.

 

interface DataType {
  CODENAME: string;
  GUNAME: string;
  MAIN_IMG: string;
  TITLE: string;
}

interface QueryType {
  status: string;
  data: { culturalEventInfo: { row: DataType[] } };
}

import { useQueryClient } from "react-query";
  
const queryClient = useQueryClient();
const query = queryClient.getQueryState("dataName") as QueryType;
 
useEffect(() => {
  if (query.status === "success" && query.data) {
    console.log(query.data);
  }
}, [query.status]);

 

이때 반드시 && query.data라고 적어주어야 한다. query.data가 undefined가 될 수도 있기 때문!