React Query - Basic

ryan·2022년 7월 3일
0

참고자료 : React Query와 상태관리 :: 2월 우아한테크세미나

📌React Query

React Query?

  • 공식 문서에서는 아래와 같이 명시되어 있으며, '리액트에서 데이터 fetch, 캐싱 그리고 데이터 업데이트를 간편하게 지원해주는 라이브러리'이다.
    Fetch, cache and update data in your React and React Native applications all without touching any "global state".

왜 사용하는가

  • 선언적 코드 및 직관적인 API

    • redux의 경우, 비동기로 server state를 관리해야 할 때, redux의 경우 pending, fullfilled, rejected에 대한 api를 모두 만들어야 하는 번거로움. 그리고 server state가 많아짐에 따라 코드가 4배로 방대해지는 가독성의 저하가 발생한다. react-query의 경우, 비동기 작업을 선언적 함수로 관리해주고, 자체적으로 error, loading state를 생성해주기 때문에 코드가 간결해진다.
  • 데이터 변동 시 다시 get해오기

  • Client Store가 fe에서 필요한 전역 상태만 남아 Store답게 사용됨.

  • API 처리에 관한 각종 인터페이스 및 옵션

  • 추가 기능

    • pagination, infinite scroll 등 지원.

📌코드 예시

📍 Queries

import {useQuery} from 'react-query';
function App() {
  const info = useQuery('todos', fetchTodoList);
  
  // useQuery(['todo', 5, {preview: true}], fetchTodoList);
  // query key는 array 형태로도 쓸 수 있음
}
  • GET으로 받아오는 대부분의 API에 사용
  • CRUD에서 Reading에서만 사용 ( 데이터 Fetching)
  • 'todos'는 query key, query key에 따라 query caching을 관리함
    • key를 기준으로 value를 구분함.
  • fetchTodoList는 query function, promise를 반환하는 함수(resolve 또는 throw error

useQuery의 반환값

data(resolve된 데이터),
error(에러가 발생했을 때 반환되는 객체),
isFetching(Request가 in-flight 중일 때 true),
status, isLoading, isSuccess, isLading 등 모두 query의 상태,
refetch(해당 query refetch하는 함수 제공),
remove(해당 query chahe에서 지우는 함수 제공)

Queries Config option (uesQuery customizing)

useQuery('todos', fetchTodoList, options);
// options에 들어가는 내장 api

onSuccess, onError,onSettled:query fetching 성공/실패/완료 시 실행할 Side Effect 정의,
enabled: 자동으로 query를 실행시킬지 말지 여부,
retry : query 동작 실패 시, 자동으로 retry 할지 결정하는 옵션,
select : 성공 시 가져온 data를 가공해서 전달,
keepPreviousData : 새롭게 fetching 시 이전 데이터 유지 여부,
refetchInterval : 주기적으로 refetch 할지 결정하는 옵션

query 여러개 쓸 때

  • 자동으로 비동기 실행해준다(동적으로 실행하려면 설정필요)
function Practice() {
  const todo = useQuery('todos', fetchTodoList);
  const project = useQuery('project', fetchProject);
  const food = useQuery('food', fetchFood);
}

📍 Mutations

  • 데이터 updating 시 사용 (데이터 생성/수정/삭제)
  • query key넣으면 devtools에서 확인할 수 있음.
const mutation = useMutation((newTodo) => {
  // mutation은 자동으로 실행되지 않음. mutate함수와 비동기 함수인 mutateAsync로 실행해야 함.
  return axios.post('/todos', newTodo);
});

Mutation 반환값

mutate(mutation을 실행하는 함수),
mutateAsync(mutate와 비슷 promise를 반환),
reset(mutation 내부 상태 clean),
useQuery와 유사

Mutation option

const mutationOp = useMutation(mutationFn, options);
  • onMutate : Mutation 동작 전 먼저 동작하는 함수, Optimistic update 적용할 때 유용
  • 이외 useQuery와 유사

Query Invalidation

  • queryClient를 통해 invalidate 메소드를 호출 (invalidate내부의 캐시 clean 후 refetch)
queryClient.invalidateQueries(); // 캐시 내의 모든 쿼리 무효화
queryClient.invalidateQueries('todos'); // 'todos'로 시작하는 모든 쿼리 무효화
  • 해당 키를 가진 query는 stale되고, 현재 rendering 되고 있는 query들은 백그라운드에서 refetch 됨.

📌 Caching, Synchronization

options

  • cacheTime : 메모리에 얼마만큼 있을 건지 (default 5분)
  • staleTime : 얼마의 시간이 흐른 후에 데이터를 stale 취급할 것인지 (default 0)

refetchOnMount,
refetchOnWindowFocus,
refetchOnReconnect

  • true일 때 Mount /window focus / reconnect 시점에 data가 stale이라고 판단되면 모두 refetch(모두 default true)

query 상태흐름

fetching >
fresh(staleTime 만료되기 전까지) >
stale(스크린에서 사용되는 동안 유지됨) >
inaction(스크린에서 없어지면, cacheTime 만료되기 전까지 유지) > deleted(cacheTime 만료)

  • stale까지는 refetch 이벤트가 발생하거나, Mount,window focus 등의 옵션에 따른 트리거 발생

*queryClient는 내부적으로 ContextAPI사용

profile
프론트엔드 개발자

0개의 댓글