[React] React Query

React Query?
React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 다른 미들웨어에 비해 간단하고 직관적인 API를 제공해주기 때문에 쉽게 사용이 가능하다.

Query : 데이터를 읽어주는 역할
Mutation : 데이터를 추가, 수정, 삭제해주는 역할
Query Invalidation : 데이터를 초기화한뒤 새로 불러옴

설치

yarn add @tanstack/react-query

App.js

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Query Setting
      refetchOnWindowFocus: false,  // default true
      retry: 0,  // default 3
      staleTime: 5000, // default 0
    },
  },
});

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
	  // ...
    </QueryClientProvider>
  );
};

QueryClientProvider : 프로젝트 전체에서 데이터를 사용할 수 있게 하는 API

query 세팅

• staleTime : 세팅한 시간안에는 새로 데이터를 가져오지 않음
• retry : 비동기 통신에 실패하면 해당 숫자만큼 반복 요청
• refetchOnWindowFocus : 사용자가 해당 페이지를 벗어났다가 다시 돌아오면 데이터가 오래된 경우 새로운 데이터를 요청해줌. 전역에서 비활성화 혹은 쿼리별 비활성화 가능.
• enabled : 쿼리가 자동으로 실행되지 않게 하려면 false로 하면 됨

api파일

(src > api > todo.js)

조회

const getTodo = async () => {
  const response = await axios.get(`서버주소/todos`);

  // 리턴값 필수
  return response.data
}
export default getTodos

추가

const addTodo = async (newTodo) => {
  await axios.post(`서버주소/todos`, newTodo)
}

components

데이터 사용 컴포넌트

                                         
const {isLoading, isError, data } = useQuery({
  queryKey: ['todos'], // query key
  queryFn : // 비동기 함수,
  retry: 3 // 실패시 재시도 횟수 false, true, number가능
  retryDelay: 1000, // 실패시 재시도 시간
})

useQuery 훅에는 첫번째 인자로 query key가, 두번째 인자로 비동기 함수가 들어간다.
첫번째 인자인 query key는 refetching 하는 데에 쓰인다.(= invalidataQueries) 그리고 해당 데이터를 불러오기 위해 즉 캐싱 처리하는 데에도 쓰이기 때문에 query key는 고유한 key여야 한다.(배열, 객체도 가능)
Query 함수는 promise객체를 return한다. (isLoading, isError, data 등)

useQuery Option

• enabled : 자동으로 query를 실행시킬지 여부
• data : 마지막으로 통신에 성공해서 반환받은 데이터
• error : 에러가 발생했을때 반환되는 객체
• status : idle, loading, error, success등 현재 query의 상태
• refetch : 서버에서 데이터를 새로 받아오기위한 함수
• remove : query cache를 지우는 함수
• select : 성공시 가져온 data를 가공해서 전달
• refetchInterval : 주기적으로 refetch 할지 결정하는 옵션

데이터 추가 컴포넌트

const queryClient = useQueryClient();
const mutation = useMutation(addTodo, {
  onSuccess: () => {
    // useQuery에서 사용했던 key를 무효화시키고 다시 불러온다.
  	queryClient.invalidataQueries("todos")
  }
  
  // 오류 관련 로직 
  
})
// dispatch(addTodo(newTodo)) 대신 mutation을 사용함
mutation.mutate(newTodo);

useMutation 훅에 첫번째 인자로 우리가 만들어둔 API addTodo가 들어가고 두번째 인자로 객체가 들어간다. 객체내에는 데이터를 불러오는데에 성공했을때와 실패했을때의 값을 넣어준다.
성공했을때엔 데이터를 화면에 바로 불러오기위해 invalidataQueries를 사용한다.