22.12.20 React-query

React-query

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리
→ 서버 상태 관리 라이브러리

장점

• cache 활용
• 비동기 과정을 선언적으로 관리할 수 있다
• 동일한 데이터를 여러번 요청하면 한번만 요청한다
• Redux Thunk로 서버 상태 관리를 할때에 비해 복잡도가 낮아져 유지보수성이 좋아진다

사용법

• index.js 설정

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• useQuery
  Data를 Get하기 위한 기능

const { isLoading, isError, data, error } = useQuery({ 
  queryKey: ["uniqueKey"], 
  queryFn: fetchTodoList
});

• useQueries
  여러개의 useQuery가 필요할때 하나로 묶어주는 기능

const result = useQueries([
  {
    queryKey: ["uniqueKey1"],
    queryFn: fetchTodoList
  },
  {
    queryKey: ["uniqueKey2"],
    queryFn: fetchNextTodoList
  }
]);

const isLoading = results.some((result) => result.isLoading);

const isError = results.some((result) => result.isError);

const error = results.some((result) => result.error);

const data = results.map((result) => result.data);

• useMutation
  Data를 수정(삭제)하거나 생성할 때 쓰는 기능 (post, patch, delete 등)

const mutation = useMutation({
  mutationFn: (post) => {
    return axios.post('url', post)
  },
  onSuccess: () => {
    queryClient.invalidateQueries("uniqueKey"); // post성공시 재렌더링
  },
})

return (
    <div>
      <button
        onClick={() => {
          mutation.mutate({ title: "title", desc: "desc" })
        }}
        >
        Post
      </button>
    </div>
  )
}