TIL - React Query 세팅하기 step by step

1. 설치

yarn add react-query

 

2. App.jsx 세팅

import { QueryClient, QueryClientProvider } from "react-query" to use.

// App.jsx

import { QueryClient, QueryClientProvider } from "react-query";
import Router from "./shared/Router";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
}

export default App;

 

3. Create 'api' folder 서버통신을 위한 폴더를 따로 만들고, 필요한 로직들을 모아놓을 파일을 만들어주는 걸 추천!

import axios from "axios";

const getDiaries = async () => {
  const response = await axios.get(`${process.env.REACT_APP_API_URL}`);
  return response;
};

export { getDiaries };

 

4. 적용

getDiaries 라는 전체 데이터 조회를 위한 로직을 만들었고, 이를 메인페이지에 적용시켜보자.

  const { isLoading, isError, data } = useQuery("diaries", getDiaries);

  if (isLoading) {
    return <h1>아직 로딩 중</h1>;
  }
  if (isError) {
    return <h1>오류 발생</h1>;
  }

  console.log("data", data);