react-query에 대해 공부해보자
react-query
는 서버의 값을 가져오거나, 캐싱, 값 업데이트, 에러핸들링과 같은 비동기작업을 편리하게 도와준다.
데이터를 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>;
}
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)),
},
]);
데이터를 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})
}
mutation함수가 성공했을때, uniqueKey로 맵핑된 get함수를 invalidateQueries
에 넣어주면 된다
아래는 어떤 todo리스트를 post한 경우 post를 다시 get하는 코드다.
const mutation = useMutation(postTodo, {
onSuccess: () => { queryClient.invalidateQueries("posts")}
})
이런경우에는 setQueryData
를 사용한다.
const mutation = useMutation(editTodo, {
onSuccess: data => {
// data가 fetchTodoById로 들어간다
queryClient.setQueryData(["todo", { id: 5 }], data);
}
});
intersection-observer
와 react-query의 useInfiniteQuery
를 사용하여 구현가능하다.
아래 출처를 참고하여 구현해보자