[TIL] React Query

React-Query

데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리이다.

React-Query장점(너무 쉽고, 책임에서 자유롭다)

1. 보일러 플레이트 만들다가 오류날 일이 없다.
2. 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다.
3. 사용방법이 기존 thunk 대비 너무 쉽구요, 직관적이다.

주요 키워드

Query

어떤 데이터에 대한 요청

axios의 경우 get요청과 비슷

const response = await axios.get(’http://localhost:3000/todos’)

Mutation

어떤 데이터를 변경(추가, 수정, 삭제)

axios의 경우 post, put, patch, delete 요청과 비슷

axios.post(’http://localhost:3000/todos’., newTodo);
axios.patch(http://localhost:3000/todos/${id}, {isDone: true});

Query Invalidation

무효화

기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있다. 그렇기 때문에 ‘최신 상태가 아닐 수’ 있다. 이런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 하기때문에 필요하다.

설치

yarn add react-query

db.json

json-sever-npm

// db.json파일 만들어서 붙여넣기
{
  "posts": [
    { "id": 1, "title": "할일1", "contents": "내용1", "isDone": false },
    { "id": 2, "title": "할일2", "contents": "내용2", "isDone": true },
    { "id": 3, "title": "할일3", "contents": "내용3", "isDone": false }
  ]
}

이제 db서버를 실행해야된다.(4000번 포트에서 db를 돌리겠다는 의미)

json-server --watch db.json --port 4000

셋팅

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;