React-Query

useQuery와 매우 유사하지만 많은 차이가 있다. ✅ useQuery와 useMutation차이 - 일회성이기 때문에 캐시 데이터가 없다. 페칭이나 리페칭 그리고 업데이트할 데이터가 있는 useQuery와 다르다. - 기본적으로 구성할 수는 있지만, 재시도가 없다. useQuery는 기본적으로 세 번 재시도한다. - 관련된 데이터가 없으므로 리페치도 없다. - 캐시 데이터가 없으므로 isLoading은 없고 isFetching만 있다. isLoading은 데이터가 없을 때 이루어지는 페칭이기 때문이다. - useMutation은 반환 객체에서 mutate 함수를 반환한다. 이것이 변이를 실행하는 데 사용된다. - onMutate 콜백도 있다. 이것을 낙관적 쿼리에 사용하는데 변이가 실패할 때 복원할 ..

일정 시간이 지나면 서버는 만료된 데이터를 삭제한다. 리페칭은 페이지를 벗어났다가 다시 돌아왔을 때 볼 수 있는데, 만료된 데이터를 다시 가져오는 것이다. stale 쿼리는 아래 경우에서 자동적으로 리페칭이 일어난다. ✅ 리페칭이 일어나는 경우 - 새로운 쿼리 인스턴스가 많아지는 경우 - 쿼리 키가 처음 호출되는 경우 * 쿼리를 호출하는 반응 컴포넌트를 증가시킨 경우 - 창을 재포커스 하는 경우 - 만료된 데이터의 업데이트 여부를 확인할 수 있는 네트워크가 다시 연결된 경우 또한 리페칭 간격이 지난 경우도 해당되는데 이 경우는 간격에 리페칭을 해서 서버를 풀링하고 사용자 조치가 없더라도 데이터가 업데이트 되는 경우다. 🤔 리페칭을 제한하고 싶으면? 1. stale 시간을 증가시킨다. 창을 재포커스 하거나..

✅ 문제 상황 react-query를 사용하던 중 Missing queryFn 오류가 났다. 한 개의 게시물에 달린 댓글을 가져오는 useQuery를 작성하던 중이었다. import { useQuery } from "react-query"; async function fetchComments(postId) { const response = await fetch( `https://jsonplaceholder.typicode.com/comments?postId=${postId}` ); return response.json(); } export function PostDetail({ post }) { const { data, error, isError, isLoading } = useQuery(["post",..

✅ React-query란 공식문서는, React에서 데이터의 fetching, caching, synchronizing, updating server state를 위한 라이브러리라고 정의한다. 즉, axios처럼 단순히 API fetching의 목적보다는, 이 데이터와 더불어 서버 상태(server state)를 관리하는 라이브러리인 것이다. 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. ✅ 사용 이유 서버로부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많다. 그렇다 보니 store는 클라이언트 state를 유지해야 하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존하게 되었다..