React-Query 정리

React-Query란

• 서버 상태 관리를 위한 라이브러리
• 자체적 캐싱 기능이 존재 (Hooks 기반 라이브러리)
• 캐싱, get한 데이터 자동 updating 지원, 중복 호출 컨트롤 지원, 무한 스크롤, 쉬운 비동기 관리

React-Query의 라이프 사이클

1. Fetching:

• 데이터 요청하는 초기 상태

2 Fresh:

• 데이터가 만료되지 않은 상태. 새로고침 시 다시 fetching된다.
• 컴포넌트 상태가 변경되더라도 데이터 다시 요청하지 않는다.

3. Stale:

• 데이터가 만료된 상태 (데이터의 최신화가 필요해서 Fetching을 통해 Fresh 상태 유지)
  - 데이터가 만료되었다는 의미는 서버에서 한번 프론트로 데이터를 주면 그 사이에 유저가 데이터를 추가, 수정, 삭제 등을 할 수 있기 때문에 만료되었다고 한다.
• 데이터의 최신화가 필요해서 Fetching을 통해 Fresh상태 유지.

4. InActive:

• 애플리케이션에서 사용하지 않는 데이터에 대한 상태
• 일정 시간 지나면 가비지 콜렉터가 캐시에서 제거한다. (기본값 5분)

5. delete:

• 가비지 콜렉터에 의해 캐시에서 제거된 상태

즉, fetching -> fresh -> stale -> InActive -> delete 순서

리액트 쿼리 기본 사용 (리액트에서 가장 많이 사용되는 API)

1. useQuery

• useQuery는 데이터를 get하기 위한 api이다.
• 첫번째 파라미터: query key(유니크 키),
• 두번째 파라미터: query Function, 즉 API 요청시 Promise 기반 비동기 함수
• useQuery는 data, isLoading, isSuccess, 등 다양한 데이터 존재
  

2. useQueries

• 여러개의 useQuery를 나란히 사용 가능하게끔 한 훅

const usersQuery = useQuery('users', fetchUsers)
const teamsQuery = useQuery('teams', fetchTeams)
const projectsQuery = useQuery('projects', fetchProjects)

만약, 이렇게 사용하면 다른 쿼리가 실행되기 전에 첫번째 쿼리가중단하고 에러를 반환할 수 있다.

 const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })
   )

하지만, useQueries는 useQuery옵션 객체를 배열로 받을 수 있다. 그와 동시에 결과값 또한, 배열로 return 한다.

3. useMutation

• useMutation은 데이터 수정 삭제 생성 시 사용
• queryKey는 useQuery마다 부여되는 고유 Key
  - queryKey의 역할은 ReactQuery가 query캐싱을 관리하도록 도와준다.
• mutate 함수 (useMutation 내부 함수) 사용하면 useMutation에 설정한 onSuccess, onError등 옵션을 통해 서버에 응답을 확인이 가능하다.

//ReactQueryPost.ts
//(axios post 함수 따로 빼놓은거)

import axios from 'axios';

interface dataType {
  title: string;
}
const ReactQueryPost = async (newPostData: dataType) => {
  const { data } = await axios.post(
    'https://dummyjson.com/products/add',
    newPostData
  );
  return data;
};

export default ReactQueryPost;

ReactQueryPost로 들어오는 인자를 받아서 post데이터로 넣어준다.

//ReactQueryView.tsx

//Mutaion 데이터 변경
  const mutationData = useMutation(ReactQueryPost);

  //   mutation 버튼 클릭 이벤트
  const onBtnClick = () => {
    mutationData.mutate(
      { title: '레오 폰' },
      {
        onSuccess: () => {
          console.log('post 성공');
        },
        onError: () => {
          console.log('post Error');
        },
        onSettled: () => {
          console.log('post settled (성공이든 실패든 둘다 동작)');
        },
      }
    );
    // console.log('mutation' + mutationData.isSuccess);
  };

useMutation은 이렇게 mutate함수 내부에서 onSuccess, onError, onSettled등 내부에서 수행이 가능하다.
{title: '레오폰'}이 객체가 ReactQueryPost내부 인자로 들어간다.

• ReactQuery 부가기능
  -> query를 invalid하다고 처리할 때 array의 filter처럼 유효하지 않은 query를 한번에 처리 가능하다

queryClient.invalidateQueries({
  predicate: query => query.queryKey[0] === "todos" && query.queryKey[1]?.version >= 10,
});