# react-query
tanstack-query의 진행 상태
isError가 안먹어요 > 나: tanstack query 에서 isError로 에러 처리를 했음에도 처리가 안됩니다.. > 시니어: isLoading, isError는 어떤 순간에 변경 됩니까? 나: ... 그렇습니다. useQuery, useMutation 등

React Query Infinite 우아하게 사용하기 with. react-query-infinite-scroll
안녕하세요 최근에 이직을 하게 되면서 react-query를 접할 일이 생겼는데 그 중에서 useInfiniteQuery를 사용 하면서 불편한점을 개선 하고자 합니다. 결론 부터 말씀 드리자면

React-query : refetchOnWindowFocus속성
react-query로 무한스크롤 리팩토링 중 발견한 현상.창을 켜 놓은 채로 다른 인터넷창을 열거나 vscode로 이동했다가 돌아오면 코드수정도 없고 데이터에 아무런 변화가 없음에도 refetch되었다.알고보니 Background Refetch라는 개념이 있었다.Ba
React Query란
서버 상태 가져오기, 캐싱, 동기화 및 업데이트 해준다.react는 데이터를 가져오거나 업데이트하는 방법을 제공하지 않는다.기존 상태 관리 라이브러리(redux, recoil) 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버

Cannot invoke an object which is possibly 'undefined'.ts(2722) (feat : useInfinitequery, fetchNextPage)
※ react-infinite-scroller 라이브러리사용※ tanstack/react-queryprops를 넘겨주는 index.tsxprops를 넘겨받는 RecipeList.tsxtype도 () => void로 잘 선언해줬는데 라는 에러가 떴다.TS에서는 '정의되지
InfiniteScroll useInfinitequery(feat : firebase, react-infinite-scroller library)
문제의 코드 startAfter(undefined)가 되어 유효하지 않은 조건이 되어 firebase 에러가 발생했다.
key가 동일한 useQuery 두 번 사용하기
react-query v3.39.2 기준이다. 부모와 자식 컴포넌트에서 똑같은 useQuery를 사용했을 때 발생하는 문제와 해결방법을 정리했다.

React Query 캐싱을 제대로 활용하자
react query는 아무 옵션을 설정하면 않으면 ❗️ 캐싱되지 않는다. ❗️❓why❓staleTime 과 cacheTime의 기본값이 각각 0분 과 5분 이다. 따라서 데이터는 캐싱 되지만, staleTime 이 0분 이므로 항상 caching 되어 있는

아직도 React-Query를 안쓴다고??
두 번째 글이다.암튼, 프로젝트를 하면서 React-Query를 사용하여 개발하게 되었다.처음에 React-Query를 사용할 때는 이해가 잘 되지 않았지만 계속 쓰다보니 더 이상 React-Query 없이는 살 수 없는 몸이 되버렸다.그래서 React-Query를 쓰

react-query를 써보자..
React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 이를 사용하면 API 호출을 간단하게 처리할 수 있고, 캐싱과 자동 업데이트 기능을 통해 데이터를 더 효율적으로 관리할 수 있다..

queryClient.invalidateQueries와 useQuery() (feat. React-query)
같은 컴포넌트의 다른파일에서 같은 query-key('user' 라고 하자)를 가진 cache data를 가져오는경우가 많을텐데, 이런경우 어떤 useQuery('user')를 기준으로 cache data가 set되는가?답은 가장 child component의 useQ

useQuery, queryClient, useMutation (React-query)
useQuery는 일반적으로 컴포넌트단에서 fetch, cache

무한 스크롤, useInfiniteQuery
useQuery와 거의 똑같이 생겼다. queryKey와 queryFn를 입력해주면 된다. queryKey는 쿼리 데이터를 가져오는데 함께 호출되며 어떤 데이터를 가져올 것인지 식별하는데 사용된다.data는 말 그대로 성공 시 받아오는 data, refetch는 해당
react-query
react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 한다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하

[React-Query] 상태관리 라이브러리 뭐쓰세요?
제가 받은 프론트엔드 면접 질문으로 가장 자주 받는 질문은 상태관리 라이브러리 뭐쓰세요? 였습니다. 보통 상태관리 라이브러리는 recoil과 react-query를 둘 다 사용하는데, 서버 상태 관리를 하면 뭐가 좋은지, 어떻게 할 수 있는지에 대한 글입니다.