[tanstack-query] (TypeScript) quick start

이번 플젝에서는 tanstack-query를 사용하기로 했다 

  npm install @tanstack/react-query

 

설치해 주고 

 

 

  import ReactDOM from 'react-dom/client';

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -- 여기 

  import './index.css';

  import App from './App';

  import reportWebVitals from './reportWebVitals';

  const queryClient = new QueryClient(); -- 여기

  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

  root.render(

    <QueryClientProvider client={queryClient}> -- 여기

      <App />

    </QueryClientProvider>, -- 여기

  );

 

  reportWebVitals();

 

index.tsx를 이런 형태로 바꾸어 준다.

최상위 컴포넌트를 QueryClientProvider로 감싸는 식인데

useContext랑 비슷하네

 

tanstack-query가 API로 컨텐츠를 받아오는 로직에서 사용하는 라이브러리라서

테스트를 해 보기 위해서는 뭔가 데이터를 받아올 서버가 필요하다

난 서버가 없으니까 catfact.ninja에서 랜덤 고양이 정보를 받아오도록 하겠음 

https://catfact.ninja/fact 로 get 요청을 보내면 

이렇게 랜덤 정보가 하나 도착하는 형태다. 

 

  type Cat = {

    fact: string;

    length: number;

  };

응답 형태를 따라 타입을 만들고

  const fetchCat = async (): Promise<Cat> => {

    const { data } = await axios.get<Cat>('https://catfact.ninja/fact');

    return data;

  };

API 요청하고 Promise를 반환하는 함수를 작성한다.

axios.get의 제너릭 타입이 Cat으로 지정되었기 때문에

데이터 받으면 바로 Cat 타입으로 들어온다. 

  const MainComponent: React.FC = () => {

    const { data, error, isLoading, isError } = useQuery<Cat>({   // 이 부분 작성 유의 

      queryKey: ['catFact'],

      queryFn: fetchCat,

    });

    if (isLoading) {

      return <div>Loading...</div>;

    }

    if (isError) {

      console.error(error);

      return <div>Error: {error.message || 'Unknown error occurred'}</div>;

    }

    return (

      <div className="flex w-full h-full">

        <div>{data?.fact}</div>

      </div>

    );

  };

  export default MainComponent;

 

tanstack-query를 사용하면 기존 API 요청 시 필요하던 useEffect()나 useState() 등의 훅을 사용하지 않아도

자동으로 데이터를 로드하고 관리할 수 있다. 

에러 처리나 로딩 시의 화면도 따로 작업할 수 있기 때문에

코드로 보기에는 이게 훨씬 직관적인 듯 

 

로딩

헉 420마리라니