📍목표- tanstack query(react-query, vue-query) 의 캐시된 데이터 전부 초기화하는 방법 알아보기- A계정으로 데이터 페칭 후, 로그아웃. B계정으로 새로 접속 시 A계정으로 불러온 데이터 제거하기 📍현재 상황- vue-query의 useQuery를 사용해서 데이터 페칭 후 캐싱- 로그인 페이지에서 useQueryClient() 를 이용해 queryClient 인스턴스를 선언- Nuxt의 $fetch로 로그인 요청- 로그인 요청이 성공(access token 및 refresh token이 반환됨)하면 queryClient.clear() 를 사용해서 모든 캐시 데이터 제거 시도=> 하지만, 캐시가 제거되지 않음 📍시도한 방법queryClient.clear() 대신- que..

[유데미] React Query : React로 서버 상태 관리하기 📍react-infinite-scroller - 해당 라이브러리에서 제공하는 InfiniteScroll 컴포넌트는 useInfiniteQuery와 호환성이 좋아 자주 쓰인다 📍InfiniteScroll 컴포넌트 - 2가지 프로퍼티가 있다 1️⃣loadMore 프로퍼티 - 더 불러올 데이터를 연결 - loadMore={fetchNextPage} 형태로 사용 2️⃣hasMore 프로퍼티 - 더 불러올 데이터가 있는지 확인 - hasMore={hasNextPage} 형태로 사용 - data는 data.pages 배열에 객체 원소 형태로 존재 1page.. 2page 등이 또 배열이므로 map을 2번 써야 한다 fetchNextPage()} h..

[유데미] React Query : React로 서버 상태 관리하기 📍useInfiniteQuery 훅스 const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ queryKey: ["sw-people"], queryFn: ({ pageParam = initialUrl }) => fetchUrl(pageParam), getNextPageParam: (lastPage) => lastPage.next || undefined, }); 1️⃣data 2️⃣fetchNextPage - 더 많은 데이터가 필요할 때 실행할 쿼리 함수 3️⃣hasNextPage - 수집할 데이터가 있는지 없는지를 따지는 불린값 - getNextPageParam이 undefine..

[유데미] React Query : React로 서버 상태 관리하기 📍Mutation - 서버에 있는 데이터를 수정하는 네트워크 통신을 만드는 것 (e.g. 블로그 제목을 바꾸거나 등) 📍useMutation 몇가지를 제외하면 useQuery와 비슷 - mutate 함수를 반환 - 데이터를 받아오지 않으므로 query key가 없어도 됨 - isLoading만 있고 isFetching은 없음 - isError의 재시도 횟수가 디폴트 0 (useQuery는 3회) 📍jsonplaceholder API는 실제로 데이터를 삭제하거나 수정하지 않음을 주의 - 단지 삭제나 수정 결과를 반환해줌 - Delete 요청이 성공적으로 전송됐는지는 유저에게 알려줄 수 있음 📍단계 1️⃣import useMutation 2..

[유데미] React Query : React로 서버 상태 관리하기 📍Prefetching 장점 - Pagination 구현 후, 유저가 다음 또는 이전 페이지를 클릭하면 fetch가 완료될때까지 Loading element를 봐야 함 - 미리 다음 페이지를 fetch하여 cache 해두면, UI가 매끄럽게 변경되어 UX를 개선할 수 있음 📍Prefetching - cache에 data를 추가 (디폴트 : stale) - re-fetching 시 이 data를 보여줌 (data는 cacheTime 지나면 소실) - page 이외에도 유저가 미리 누를 가능성이 높은 탭에 미리 사용하면 좋음 📍사용 방법 1️⃣useQueryClient 를 import 한다 2️⃣useEffect 훅을 통해 currentPa..

[유데미] React Query : React로 서버 상태 관리하기 📍props type 부여 - 부모 컴포넌트에서 넘겨준 props는 어떻게 type을 지정할까? 부모 컴포넌트에서 export한 type을 자식 컴포넌트에서 사용하기 위해 새롭게 typing이 필요 // 1. 부모 컴포넌트에서 타입을 import import { PostType } from "./Posts"; // 2. props에 맞는 형태로 재가공 // props가 여러개일때는 post밑에 이어서 쓰면 됨 interface PostProps { post: PostType; } // ... // 3. {} 뒤에 지정 export function PostDetail({ post }: PostProps) { // ... } 📍익명 함수 형..