<aside> 💡 Fetching, Caching, 동기화, 서버 데이터 업데이트를 쉽게 만들어주는 라이브러리이다.

</aside>

기존 미들웨어의 한계

<aside> 💡 redux-thunk, redux-saga 등 api 통신과 비동기 데이터 관리를 위한 라이브러리의 한계가 있다.

• 보일러 플레이트 : 코드량 너무 많음
• 규격화 문제 : redux가 비동기 데이터 관리르 위한 전문 라이브러리가 아니다. </aside>

react query의 장점

<aside> 💡 쉽고 코드가 적고 책임에서 자유롭다.

• 보일러 플레이트 작성하다 오류 날 일이없다.
• 사용방법이 직관적이고 쉽다. </aside>

react query 키워드

<aside> 💡 주요 키워드

• Query : 데이터에 대한 요청을 의미

• Mutation : 데이터를 변경 CRUD 중 CUD

• Invalidation : 가져온 Query는 서버 데이터라 최신 상태가 아닐 수 있기 때문에 기존 쿼리를

  무효화 시킨 후 최신화 시켜준다.

</aside>

사용방법

1. 설치

yarn add react-query

1. QueryClient 전체 주입

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

**const queryClient = useQueryClient();**

const App = () => {

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

export default App;

1. 사용

**const SERVER_URI = "<http://localhost:4000>";**

const getTodos = async () => {
  const response = await axios.get(`${SERVER_URI}/todos`);
  return response.data;
};

**const addTodo = async (newTodo) => {
  await axios.post(`${SERVER_URI}/todos`, newTodo);
};**

const queryClient = new QueryClient();

const mutation = useMutation(addTodo, {
  onSuccess: () => {
    // Invalidate and refresh
    // 이렇게 하면, todos라는 이름으로 만들었던 query를
    // invalidate 할 수 있어요.
    queryClient.invalidateQueries("todos");
  },
});