React Query와 QueryClient 설정하기

환영합니다

React Query란 무엇인가요

설치

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools --save-dev

QueryClient 만들기

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

const queryClient = new QueryClient();

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

첫 번째 useQuery

import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error!</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

쿼리 키

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

// Post with id 5
useQuery({ queryKey: ['posts', 5], queryFn: () => fetchPost(5) })

// Posts filtered by category
useQuery({ queryKey: ['posts', { category: 'react' }], queryFn: /* ... */ })

쿼리 상태

React Query DevTools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

기본 설정

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,     // data is fresh for 60s
      retry: 2,              // retry failed queries twice
      refetchOnWindowFocus: false,
    },
  },
});

자동으로 다시 가져오기

빠른 확인

복습

다음 내용