React Query（TanStack Query）の基本的な使い方

npm install @tanstack/react-query

// main.tsx 또는 App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
 
const fetchPosts = async () => { // 정보를 fetch하는 함수
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return res.data;
};
 
function PostList() {
  const { data, isLoading, isError, error } = useQuery({ // 쿼리 결과를 가져오는 컴포넌트
    queryKey: ['posts'], // 쿼리의 고유 식별자
    queryFn: fetchPosts, // 정보를 fetch하는 함수
  });
  
  if (isLoading) return <p>불러오는 중입니다...</p>;
  if (isError) return <p>오류가 발생했습니다: {(error as Error).message}</p>;
  return (
    <ul>
      {data.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
});

useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

useQuery({
  queryKey: ['users', userId, 'posts'],
  queryFn: () => fetchUserPosts(userId),
});

// App.tsx
<Suspense fallback={<p>로딩 중입니다...</p>}>
  <PostList />
</Suspense>

// PostList.tsx
const { data } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  suspense: true,
});

npm install @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

// 서버에서
const queryClient = new QueryClient();
await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts });
const dehydratedState = dehydrate(queryClient);

// 클라이언트에서
<Hydrate state={dehydratedState}>
  <App />
</Hydrate>

useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  retry: 2,
  onError: (error) => {
    toast.error('데이터를 불러오는 데 실패했습니다');
  },
});