Window Focus Refetching 만약 유저가 다른 창으로 이동했고, 그 사이에 query data가 stale상태로 변해있다면 TanStack Query는 자동적으로 background환경에서 데이터를 요청한다. 만약 이게 싫다면 refetchOnWindowFocus option을 설정하여 개별 쿼리든, 전역적으로 설정해서 모든 쿼리에 대해 서든 이러한 설정을 막을 수 있다. 전역적으로 모든 query에 대해 window focus refetching 막기 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, }, }, }) function App() { return ... }..
React-Query
Dependent Qeuries Dependent Qeuries는 Dependent Qeuries가 실행되기 이전 실행되는 queries에 의존하는 queries다. 이렇게 Dependent Qeuries를 만들어주려면 따로 어떤 특별한 기능을 이용하는 것이 아니라, enabled옵션으로 상황을 조성해주는 것이다. 아래 예시는 userId가 제대로 받아오기이전까지는 실행되지않게 enabled옵션으로 환경을 조성해준 예시이다. *enabled옵션이 false값일 경우 자동적으로 useQuery함수는 실행되지 않는다. userId가 정상적으로 받아진다면?. !!userId는 true, userId가 정상적으로 받아지지 않는다면?. !!userId는 false이다. 따라서 userId가 정상적으로 받아지는 경..
Queries Functions Query Function은 말그대로 promise를 리턴해주는 메서드이다. 그 promise는 데이터를 resolve하거나 error을 throw해야한다. 다음의 예시들은 모두 사용가능한 예시들이다. useQuery(['todos'], fetchAllTodos) useQuery(['todos', todoId], () => fetchTodoById(todoId)) useQuery(['todos', todoId], async () => { const data = await fetchTodoById(todoId) return data }) useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1])) Han..
Query basics 쿼리는 unique key에 묶인 비동기 데이터 소스에 의한 *선언적 의존성이다. 쿼리는 서버로부터 데이터를 받아오기위해 Promise기반 메서드와 함께 사용될 수 있다. 만약 사용하는 메서드가 서버측의 데이터를 수정한는 메서드라면 차라리 Mutation을 사용하는 것이 낫다. 선언적 의존성이란 말이 어렵다. 프로그래밍에서 '선언적'이란 어떤 작업을 어떻게 수행할지를 직접 명시하지 않고도 원하는 결과를 설명하는 것을 의미한다. 예를들어 리액트에서 JSX를 사용하여 UI를 정의할때, 어떻게 UI가 그려지는지는 직접 명시하지않지만 어떤 컴포넌트와 어떤 구조로 UI를 나타내고 싶은지를 선언하는 것과 같다. 프로그래밍에서의 '의존성'이란 비동기 데이터 소스에서 데이터를 가져올 때, 해당 ..
Important Defaults React-Query를 사용하면서 중요하게 여겨야 할 부분에 대한 설명이다. useQuery 혹은 useInfiniteQuery에 의해 cached된 data는 기본적으로 stale상태로 여겨진다. 전역적으로 설정해 모든 쿼리에 대해, 혹은 개별 쿼리에 대해 'staleTime'옵션을 이용해 더 '긴' staleTime을 만들어줄 수 있다. staleTime이 짧으면 짧을수록 stale상태로 빨리 변하고, stale상태로 변하면 자동적으로 refetch된다. staleTime을 더 길게 만들어준다면 refetch주기를 더 길게 가져갈 수 있다는 점을 바로 캐치할 수 있다. Stale queries stale queries는 다음과 같은 상황들에 대해 background에..
What is "React Query"? React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. → 서버 상태 관리 라이브러리중 하나이다. (전역)상태 관리 라이브러리 redux middleware redux-saga redux-thunk(redux-toolkit에 내장) redux-observable recoil mobx jotai zustand xstate 서버 상태 관리 라이브러리 react-query swr rtk-query(redux-toolkit에 내장) Why "React Query"? 등장 배경 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언..
