목록🌺 TanStack Query (6)
윤일무이
[TanStack Query] Type has no properties in common with type invalidateQueries 에러 해결
발견한 에러questrip에서 맛집을 추천하는 페이지인 Recommend 페이지를 개발하고 있다.이 페이지에서는 서버로부터 10개 이상의 추천 데이터를 받아오지만 유저에게는 1개씩만 데이터를 보여준다.유저가 이 맛집을 선호하는지, 비선호하는지, 관심 없는지 무조건 1개 이상의 상태를 취해야만 계속 추천 데이터를 볼 수 있다. 즉 선호(Accepted), 비선호(Denied), 관심 없음(Kept) 3가지 중 1개의 상태를 취하면 그 상태를 post 해 서버에 현황을 보내주고, 추천 데이터는 1개가 줄어든 상태로 다시 받아와야 한다.const response = await axiosInstance.post( `/api/v1/recommend`, { placeId: placeId, ..
[TanStack Query] 낙관적 업데이트
낙관적 업데이트낙관적 업데이트란 UX를 위해 빠르게 UI를 갱신하거나 업데이트하는 방법 중 하나로, 어떤 작업에 대한 응답을 서버로부터 받기 전에 해당 응답이 성공적으로 돌아올 것이라고 가정(낙관적)해서 먼저 업데이트를 진행한다. 만약 실패한다면 실행했던 낙관적 업데이트를 롤백하면 된다. 여태까지 작업했던 웹 애플리케이션은 이벤트를 CRUD하는 구조였는데, 이벤트의 제목을 수정하면 새로고침을 해야만 수정된 내용이 반영되는 불편함이 있다. 우리는 수정하고 [확인]버튼을 누르면 바로 수정된 내용이 반영되어 보여지길 원한다. 이 때 onSuccess로 쿼리를 무효화 시켜서 구현하려고 하면 변형이 완료될 때까지 기다려야 하는 불편함이 있다. 또 이벤트의 제목이 빈 문자열이면 에러가 뜨기 때문에 이 부분을 고려해..
[TanStack Query] useMutation으로 데이터 변경/성공 시 동작 및 쿼리 무효화
useMutationTanStack Query로 데이터를 가져오는 것 뿐만 아니라 새 이벤트 생성같이 데이터를 전송하는 것도 가능하다.폼을 제출해 데이터를 전송하는 예제를 통해서 데이터를 전송하고 수집해보자! 먼저 아래와 같은 api를 http.js에 추가해준다.export async function createNewEvent(eventData) { const response = await fetch(`http://localhost:3000/events`, { method: 'POST', body: JSON.stringify(eventData), headers: { 'Content-Type': 'application/json', }, }); if (!response.o..
[TanStack Query] 동적 쿼리와 enabled를 사용한 쿼리 활성/비활성화
동적으로 쿼리 사용하기input에 검색어를 입력하고 검색하면 해당되는 데이터를 받아오려고 한다.이전 게시물에서 분리해두었던 http.js의 url에 쿼리 파라미터를 추가해 동적인 쿼리를 만들어보자. export default function FindEventSection() { const searchElement = useRef(); function handleSubmit(event) { event.preventDefault(); } return ( Find your next event! Search Please enter a search term and to find events..
[TanStack Query] useQuery 사용하기
useQuery 사용하기npm install @tanstack/react-queryyarn add @tanstack/react-query 먼저 TanStack Query 사용을 위해 설치를 해준다. 강의를 따라가면서 기존 코드에서 useQuery를 도입해보자. NewEventsSection이라는 컴포넌트에는 커스텀 상태 관리와 useEffect hook이 있다.컴포넌트가 마운트 될 때마다 fetchEvents라는 함수가 실행된다. 이 함수가 실행되면서 setIsLoading(true)가 되고, response 또는 error를 받아 그에 맞는 content를 보여준다.export default function NewEventsSection() { const [data, setData] = useStat..
[TanStack Query] TanStack Query(React Query) 이해하기
들어가기(v4부터 다른 프레임워크도 지원함에 따라 더 이상 React Query가 아니라 TanStack Query가 되었지만 여전히 많은 유저들이 React Query라고 하는 것 같다. 나도 그게 더 손에 붙지만 공식 문서에 TanStack Query로 명명되어 있으므로 앞으로는 TanStack Query라고 하겠다.) 최근 '좋은 상태 관리'에 대한 고민을 하고 있다. 이전에 작업한 곰곰 다이어리를 리팩토링하려고 하는데 상태가 매우 더러워 손을 댈 엄두를 내지 못하고 있기 때문이다. 클라이언트에서 쓰는 상태와 서버 데이터를 받는 상태들이 복잡하게 섞여 있는 게 가장 큰 이유인데, 이걸 어떻게 개선하면 좋을지 알아보다 TanStack Query를 적용해보면 좋겠다는 생각을 하게 됐다. 상태란?먼저 맨..