React-Query를 간단하게 정리해보자

최근에 React-Redux 말고 React-Query를 써봤다.
처음 써봤는데 편리하고 좋아서
제대로 정리하면서 공부해보려고 한답.

그냥 번역해보면서 읽은거니까..

틀리면 말해주세욤

---

↓공식문서↓
https://react-query-v3.tanstack.com/overview

---

React Query

: 서버스테이트를 fetching, 캐싱, 동기화 ,업데이트 해주는 React 라이브러리이다.

React Query는 왜 만들었을까?

: 기존 상태관리 라이브러리는 클라이언트 상태를 관리하기 좋았지만
비동기와 서버스테이트 관리에는 좋지 않았다.

React Query를 쓰는 이유

: 많은 로직들을 없애줄것임
: 서버 스테이트들을 쉽고 안정적으로 유지시켜줄것임
: 최종사용자들에게 애플리케이션을 예전보다 좀 더 빠르게 느끼게해줄것임

---

사용방법

설치

 npm i react-query

---

중요 개념

1. Queries
2. Mutations
3. Query Invalidation

시작

1. react-query에서 QueryClient, QueryClietProvider를 import해준다.
2. const queryClient = new QueryClient();로 인스턴스를 생성해준다.
3. <QueryClientProvider>로 감싸주고
4. <QueryClientProvider client={queryClient} >를 전달해준다.

import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <QueryClientProvider client={queryClient}>
		<App/>
      </QueryClientProvider>
    </>
  );
}

export default MyApp;

---

1. Queries

unique key를 사용한다.
unique key는 내부적으로 refetching, caching, 사용하는 쿼리들을 공유하기 위해 사용된다.

query는 Promise를 기반으로한 메소드(get과 post)를 서버로부터 데이터를 fetch할때 사용 할 수 있다.
만약에 우리가 사용하는 메소드가 server로 부터 데이터를 수정한다면
Mutations를 사용하는걸 추천한다

query는 data와 Throws a error를 리턴해준다.

useQuery : 서버데이터 가져오기

const result = useQuery("uniquekey",getAPI);

---

+ Get

useQuery안에 uniquekey와 getAPI를 넣어준다.
이때 result는 isLoading,isError, isSuccess,isIdle이 있다.
useQuery로 return되는 data는 data라는 이름이 default값이다.
다른 이름으로 사용하고 싶다면 data: 사용하고싶은 data명 으로 지정해주면된다.

const getProductQuery = () => {
  const {
    isLoading,
    isError,
    data: productData,
  } = useQuery(QUERY_KEYS.PRODUCT, getProductAPI);
  if (isLoading) {
    return <h2>Loading</h2>;
  }
  if (isError) {
    return <h2>Error</h2>;
  }
  if (isSuccess) {
    const product: IProduct[] = productData.data;
    return product.map((item, index) => {
      return <div key={index}>제품아이디:{item.id}</div>;
    });
  }
};

또 다른 방법으론
status를 받아와서

const {status,data,error} = useQuery(QUERY_KEYS.PRODUCT, getProductAPI);

status === 'loading'
status ==='error'
status ==='success'
를 사용할 수 있다.

---

2. Mutations

mutations는 create / update / delete 또는 server-side-deffect에 사용된다.
useMutation 훅을 이용한다.
mutations함수는 한개의 변수 또는 objcet를 전달 할 수 있다.
그러나 onSuccss옵션에서 Query Clients의 invalidateQueries메소드 와
setQueryDat메소드를 사용하면, 더 강력하게 사용할 수 있다.

mutateAsync
promise를 리턴받기 위해 mutateAsync를 mutate대신 사용한다.

const mutation = useMutation(createAPI);
try{
	const todo = await mutation.mutateAsync(todo);
}
catch{
	console.error(error);
}
finally{
	console.log('done');
}

---

3. Query Invalidation

다시 fetch되기전에 쿼리를 기다리는건 항상 작동하진 않는다.
사용자가 작업을 완료했기때문에 데이터가 이전것이라는것을 알고있을때도 그렇다.
이런 이유들 때문에 QueryClient는 invalidateQueries 메소드를 제공한다.

queryClient.invalidateQueries()
queryClient.invalidateQueries('todos')

invalidateQueries를 사용할때 2가지가 발생한다.
1. 예전의 데이터로 표기된다. 그리고 오래된 state는 overrieds 한다.
2. useQuery나 연관된 훅들을 통해 현재 쿼리가 렌더됐다면,background에서 refetched됩니다.