react-query

김태완·2022년 7월 2일

캐싱

React

목록 보기

15/24

react-query에 대해 공부해보자

react-query는 서버의 값을 가져오거나, 캐싱, 값 업데이트, 에러핸들링과 같은 비동기작업을 편리하게 도와준다.

react-query의 장점

캐싱 핸들링
fetch 데이터에 대해 update를 하면 자동으로 fetch를 시행한다
데이터가 오래 되었다고 판단되면 다시 fetch를 한다
동일 데이터를 여러번 요청하면 1번만 요청한다
무한 스크롤링
비동기 과정을 선언적으로 관리가능
react-hook과 사용구조가 비슷하다

useQuery

데이터를 get하기위한 api
useQuery는 비동기로 작동한다 따라서 여러개의 useQuery가 있다면 순차적 실행이 아니라 병렬실행된다.

const { isLoading, isError, data, error } = useQuery('posts', () =>
    axios
      .get('https://jsonplaceholder.typicode.com/posts/10')
      .then((res) => res.data)
  );

  if (isLoading) {
    return <span>Loading...</span>;
  }
  if (isError) {
    return <span>Error!!!</span>;
  }

useQuerys

Promise.all처럼 여러개의 useQuery를 다뤄야 할때 사용 (모두 병렬처리)

 const results = useQueries([
    {
      queryKey: ['posts'],
      queryFn: () =>
        axios
          .get('https://jsonplaceholder.typicode.com/posts/10')
          .then((res) => setPost(res.data)),
    },
    {
      queryKey: ['comments'],
      queryFn: () =>
        axios
          .get(`https://jsonplaceholder.typicode.com/comments/10`)
          .then((res) => setComment(res.data)),
    },
  ]);

useMutation

데이터를 post, update 하기위한 api
사용법은 useQuery와 비슷하다

const loginMutation = useMutation(loginApi, {
	onMutate : var => {console.log(var)},
    onError : (err,var,con) => {},
    onSuccess: (data, var, con) => { console.log( data)},
    onSettled: () => {console.log("end")}
});

const handleSubmit = () => {
	loginMutation.mutate({id, pw})
}

update후에 get을 바로 실행가능하다

mutation함수가 성공했을때, uniqueKey로 맵핑된 get함수를 invalidateQueries에 넣어주면 된다
아래는 어떤 todo리스트를 post한 경우 post를 다시 get하는 코드다.

const mutation = useMutation(postTodo, {
	onSuccess: () => { queryClient.invalidateQueries("posts")}
})

mutation에서 return된 값을 get에 사용

이런경우에는 setQueryData를 사용한다.

const mutation = useMutation(editTodo, {
  onSuccess: data => {
    // data가 fetchTodoById로 들어간다
    queryClient.setQueryData(["todo", { id: 5 }], data);
  }
});