React Query 에 대한 글

 

사용하는 이유

 

React Query는 종종 React를 위한 누락된 데이터 페칭 라이브러리로 설명되지만, 보다 기술적인 용어로 React 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 미풍스럽게 한다.

 

>>React에서 API 의 정보를 가져오는데 더욱 관리하기 쉽게 해준다는 의미이다.

 

왜냐하면 React Query 를 사용하지 않을 때에는 data를 처리하는 함수코드와 isLoading 을 처리해주는 함수 , Error 를 처리해주는 함수 등 여러부분을 신경써야 하지만 React Query에는 이미 대부분의 기능들이 내장되어 있어 사용하기만 하면 됩니다.

 

설치법

 $ npm i react-query
 # or
 $ yarn add react-query

 

사용법

1.QueryClient 와 QueryClientProvider 을 import 해주고 앱에 적용해줍니다.

 import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()
 
 function App() {
   return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }

 

2.API 를 fetch 해준 뒤 export 해줍니다.

export function getMovies() {
  return fetch(`${BASE_URL}/movie/now_playing?api_key=${API_KEY}`).then(
    (response) => response.json()
  );
}

 * 타입스크립트의 경우 interface도 export 해줍니다

 

export interface IMovie {
  backdrop_path: string;
  id: number;
  original_title: string;
  overview: string;
  poster_path: string;
  title: string;
  release_date: string;
  vote_average: number;
}

export interface IGetMoviesProps {
  dates: {
    maximum: string;
    minimum: string;
  };
  page: number;
  results: IMovie[];
  total_pages: number;
  total_results: number;
}

 

3. 문자열을 사용하는 키와 배열을 사용하는 키를 이용해 useQuery() 사용

 

*문자열만 사용하는 키의 경우

 import { useQuery } from 'react-query'
 
 function App() {
   const info = useQuery('todos', fetchTodoList)
 }

 

*배열을 사용하여 유니크한 키를 이용하는 경우

 // An individual todo
 useQuery(['todo', 5], ...)
 // queryKey === ['todo', 5]
 
 // An individual todo in a "preview" format
 useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]
 
 // A list of todos that are "done"
 useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]

 

 function Todos({ todoId }) {
   const result = useQuery(['todos', todoId], () => fetchTodoById(todoId))
 }

 

4. fetch 한 API 의 데이터를 알려주는 data , 로딩중인 것을 알려주는 isLoading 

const { data, isLoading } = useQuery<IGetMoviesProps>(
    ["movies", "nowPlaying"],
    getMovies
  );

 

const {data, isLoading} =useQuery <타입스크립트 인터페이스>(["유니크값","유니크값"] ,API fetch하는 함수>> [] useQuery에서는 배열 자체를 유니크한 값으로 생각하기에 배열의 원소까지 완전 똑같지만 않으면 배열안의 원소는 다른곳에도 사용 가능합니다.

 

5. 이제 fetch 한 데이터를 사용하시면 됩니다.

 

<Wrapper>
      {isLoading ? (
        <Loader>Loading...</Loader>
      ) : (
        <>
          <Banner
            onClick={increaseIndex}
            isBack={makeImageHelper(data?.results[0].backdrop_path || "")}
          >
            <Title>{data?.results[0].title}</Title>
            <Overview>{data?.results[0].overview}</Overview>
          </Banner>

 

 

API 실시간으로 갱신되게 처리하는 방법

 const { isLoading: CoinInfoLoading, data: CoinInfoData } =
    useQuery<ICoinInfo>(["coinInfo", coinId], () => fetchCoinInfo(coinId), {
      refetchInterval: 10000,
    });

옵션 중 하나인 refetchInterval 을 설정하면 됩니다.

 

다른 옵션에는 Error을 감지하는 경우와 API fetch 에 실패하였을 때 몇번 재시도할건지 설정할 수도 있습니다.

 

DOC 문서를 보고 필요한 것이 있으면 적용해주어야겠습니다.

 

https://react-query.tanstack.com/guides/window-focus-refetching#_top

Window Focus Refetching