# tanstack-query
tanstack-query(react-query) key 관리
예전 팀프로젝트에서 부족했던 tanstack-query key 관리에 대해서 정리해 본다. tanstack-query 흔히 react-query 라고도 불리는 tanstack-query는 비동기적인 서버 상태를 관리하기 위해 존재하는 상태관리 라이브러리이다. 타 상태
[React] React Query로 데이터 Fetch와 Update 해보기
그동안 axios만 단독으로 사용해오다가, 리액트쿼리의 장점을 경험해보기위해 이번 RN 프로젝트에 적용해보기로 하였다. 리액트쿼리 버전은 v5를 이용했고, 실행환경은 expo다. 설치 및 환경설정 Fetch - useQuery Update - useMutation
<initialData와 prefetchQuery를 대하는 우리의 자세(feat. @tanstack-query)>
내가 생각하는 프로그래밍은 "잘못된 정보의 간극을 줄이는 것."얼마 전, 회사에서 만난 react-query 이슈와 더불어 해결 방법을 한 번 공유해 보려고 한다. 필자가 직접 겪은 부분은 문제는 아니지만, 그럼에도 불구하고, 이 문제를 추후 다시 겪기 전에 분명히 짚
[Tanstack Query] Next.js에서 Devtools가 사라지는 문제 해결
tanstack query hook을 만들어 사용하기 전 까진 문제 없이 devtools가 존재하다 hook을 사용하면 사라지는 문제가 발생했다!
Data fetch 함수의 타입 지정
강의에서 제공된 data fetch 함수를 작성하고 사용하는 과정에서 타입 에러를 만났다. 강의에서는 에러가 발생하지 않았었는데, 동일한 코드를 작성했음에도 에러가 발생한 것을 보니 React Query 버전을 강의와 다르게 적용했기 때문인 것으로 보인다. 에러를 해결
React Query를 알아보자
React Query 캐시를 이용하여 서버 상태를 쉽게 관리할 수 있도록 도와주는 React 라이브러리 비동기 상태 관리자로, 데이터 뿐만 아니라 Promise 형태의 비동기 상태를 관리할 수 있다. React Query는 데이터를 refetch 해오는 전략 지표를 제
React - React Query(TanStack Query)
웹 애플리케이션에서 데이터 패칭, 캐싱, 상태 관리 등의 복잡한 작업을 간소화하고 효율적으로 수행할수 있도록 도와주는 React Query에 대해서 학습하고 직접 사용해보자.
무한스크롤 구현하기(useInfiniteQuery, 커서 기반 페이지네이션)
팀바팀의 팀 피드 기능에 무한스크롤 기능이 있어서 구현해보았다. 사실 이 기능은 레벨3때 구현했는데 레벨4와서 요구사항이 바뀌는 바람에.. 정방향 무한스크롤(아래로 스크롤 할 때 무한스크롤)과 역방향 무한스크롤(위로 스크롤 할 때 무한스크롤) 둘다 구현하는 경험을
[라이브러리] React-Query 개념, 기본 사용법
동아리 네트워킹에서 리액트 쿼리에 대해 많이 알고 사용하고 있다는 것을 알게 되었다.캐싱, 값 없데이트 등 여러 기능을 활용하면 최적화와 개발시 편리성을 동시에 잡을 수 있을 것 이라 생각 되어서 빠르게 공부하고 프로젝트 개발시 사용해야겠다고 생각이 들었다.현재는 v4
TanStack Query 잘 사용하기
TanStack Query를 회사 실무에서 사용하면서 최근에 내가 놓쳤던 부분들에 대해 정리해보려고 한다.
비동기 데이터 패칭의 로딩, 에러 상태 분리하기 (with Tanstack Query, Suspense, Error Boundary)
비동기 데이터 패칭 패턴 컴포넌트에서 외부 데이터를 패칭해 사용하는 경우 아래와 같은 패턴을 많이 사용합니다. 위와 같은 패턴은 아무 이상없이 잘 작동하지만 데이터 패칭의 에러, 로딩, 성공 상태를 모두 한 컴포넌트 안에서 다루기 때문에 코드가 복잡해지며 비즈니스 로
이미지 로딩 경험 개선하기 2 (feat. suspense)
프로젝트 진행을 하면서 tanstack query를 도입하게 됐는데, 이번에는 useQuery의 suspense 옵션을 활용해 문제를 해결해보았다
[TanStack Query] queryClient초기화관련
App.tsx(최상위 컴포넌트)에서 queryClient를 초기화해주면 다른 컴포넌트에서 안 해줘야하는건가?하위컴포넌트의 useMutation에서 invalidateQueries()를 쓰기 위해서는 queryClient가 있어야하는데, 다시 불러오려면 redux로 qu