react-query

김태완·2022년 7월 2일
1

React

목록 보기
15/24
post-thumbnail

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);
  }
});

무한스크롤 + lazy loading

intersection-observer와 react-query의 useInfiniteQuery를 사용하여 구현가능하다.
아래 출처를 참고하여 구현해보자

https://velog.io/@handwoong/React-Query%EB%A1%9C-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

profile
프론트엔드개발

0개의 댓글