이번에 TanStackQuery를 처음 써봐서 작성한 포스트이다.
현재 리액트(vite + ts) 를 통해 작성되어 있다.

QueryClient

• QueryClient는 TanStack Query의 핵심 객체로, 캐시를 관리하고 쿼리(Fetch) 작업을 수행하며, 상태를 추적한다.
• QueryClient를 통해 데이터를 캐시에 저장, 불러오기, 무효화 작업등을 제어할 수 있다.

QueryClient를 사용해 cache와 상호작용 할 수 있다고 적혀있다.

Cache?

공식문서에 적혀있는 Cache는 TanStackQuery에서 데이터를 관리하고 저장하는 방식을 말한다.

• 캐시는 데이터를 빠르게 다시 사용할 수 있도록 메모리에 임시로 저장하는 공간이다.
• TanStack Query에서는 API호출 결과를 캐시에 저장하여 같은 데이터에 대한 반복적인 네트워크 요청을 방지하고, 성능을 최적화 한다.

useCase

// main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
	<StrictMode>
		<QueryClientProvider client={queryClient}> 
			<BrowserRouter>
				<App />
			</BrowserRouter>
		</QueryClientProvider>
	</StrictMode>,
);

API Request

API 요청 작성

// src/api/fetchMovie.ts
import axios from "axios";

export async function fetchMovie() {
	const url =
		"https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year";
	try {
		const response = await axios.get(url);

		return response.data.data.movies;
	} catch (error) {
		console.error(error);
	}
}

TanStack Query를 사용해서 API를 사용

// src/page/Dashboard.tsx
import { fetchMovie } from "../api/fetchMovie";
import { useQuery } from "@tanstack/react-query";

interface Movie {
	id: number;
	title: string;
	large_cover_image: string;
}

const DashBoard = () => {
	// api 응답 받기.
	const { isPending, isError, data, error } = useQuery({
		queryKey: ["movie"],
		queryFn: fetchMovie,
	});

	if (isPending) {
		console.log("now is pending");
		return <span>Loading...</span>;
	}
	if (isError) {
		console.log("now is error");
		return <span>Error: {error.message}</span>;
	}

	return (
		<>
			<div className="grid grid-cols-4 mt-5 max-w-screen-xl mx-auto">
				{data?.map((movie: Movie) => (
					<div key={movie.id} className="">
						<img src={movie.large_cover_image} alt={movie.title} />
						<h2>{movie.title}</h2>
					</div>
				))}
			</div>
		</>
	);
};

export default DashBoard;

이렇게 간단하게 API 요청/응답이 가능하다.
그 외에도 많은 옵션들이 있지만 이번 포스트에선 여기까지