React Query

1. React Query란?

api로 받아온 데이터 캐싱기능을 쉽게 구현하게 해주는 라이브러리

2. 사용방법

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

• data : queryFn을 통해 데이터를 가져오면 이 값으로 반환된다.

• isLoading : 아직 데이터를 가져오지 못해 기다리고 있는 상황

• error : 에러 처리

queryKey

• queryKey를 기반으로 데이터를 캐싱한다(한마디로 캐싱된 데이터를 가리키는 고유한 id라고 보면 됨).

• 문자열, 배열로 지정할 수 있다.

const { data, isLoading, error } = useQuery(['products', id], () => axios.get(`http://.../${id}`));

queryFn

 useQuery('products', fetchProducts);
 useQuery(['products', produtId], () => fetchProductById(productId));

options

• enable(boolean) : 쿼리가 자동으로 실행되지 않게 하는 기능

TypeScriptCopy

const { data } = useQuery(
  ['products', id],
  () => fetchProductById(id),
  {
    enabled: !!id,
  }
); // id가 존재할 때만 쿼리 요청을 보냄.

• staleTime(number | Infinity, default = 0) : 데이터가 fresh로 유지되는 시간.

• cacheTime(number | Infinity, default = 5min) : 캐시가 메모리에 남아있는 시간. 이 시간이 지나면 garbage collector에 의해 메모리에서 캐시가 제거된다.

• refetchOnMount(boolean | “always”, default = true) : 데이터가 stale일 때 마운트마다 refetch실행

• refetchOnWindowFocus(boolean | “always”, default = true) : 데이터가 stale이고 해당 창이 focus되면 refetch 실행

• onSuccess((data) ⇒ void) : 쿼리 성공시 실행되는 함수

• onError((error) ⇒ void) : 쿼리 실패시 실행되는 함수

• onSettled((data?, error?) ⇒ void) : 성공? → 성공데이터, 실패? → 에러

3. default options

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    }
  }
});

4. useMutation

const { data, isLoading, mutate, mutateAsync } = useMutation(mutationFn, options);

mutate(variables, {
  onError,
  onSettled,
  onSuccess,
});

• mutate :

mutate({ id: new Date(), title: 'Do Laundry' }) // 이런식으로 variable객체 전달

• mutationFn((variables) ⇒ Promise) : api요청 함수. mutate에서 variable객체를 받아온다.

const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  }) // mutate에서 받은 variables가 newTodo

options

• onMutate : mutation함수가 실행되기 전에 실행됨.

• onSuccess : 성공 후 결과를 전달할 때 실행됨.

• onError : mutation이 에러가 발생하면

• onSettled : 성공한 데이터 또는 에러 전달시 실행됨.

5. 강제 refetch

useMutation(addProduct, {onSuccess: () => { 
queryClient.invalidateQueries(queryKeys);
   },});

• 설명 : addProduct가 실행되고, 성공할 경우 invalidateQueries(해당 쿼리를 오래된 것으로 취급하여 강제 refetch)를 통해 새로 refetch해와서 방금 올린 product의 내용을 볼 수 있게 된다.

6. 총정리

1. staleTime 🆚 cacheTime

• staleTIme : staleTime이 지나면 background에서 refetch해와서 자연스러운 변경.(api call은 함)

• cacheTime : cacheTime이 지나면 캐시가 제거되며 refetch되기 때문에 로딩가능성 있음.

1. useMutation

• 데이터를 변경하게 될 때 사용하면 된다.

• 강제 refetch를 적절히 사용하자.