Abstract

react-query 에 대해 정리한다.

react-query 는 fetching, caching, synchronizing, updating server state 를 수월히 하게 해주는 library 이다.

Materials

• TanStack Query v4
• [React Query] 리액트 쿼리 시작하기 (useQuery) | velog

Basic

Tutorial

QueryClientProvider Component 를 배치한다.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

useQuery() 를 실행한다. userQuery | react-query

import { useQuery } from "react-query";
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)