온라인 강의(유데미, 인프런 등)/React-Query(유데미) (9) 썸네일형 리스트형 Mutation & 쿼리 무효(Invalidating query) & 사용자와 쿼리 캐시 업데이트 & 낙관적 업데이트 Mutation mutation에서도 query에서 했던 것처럼 전역 페칭 인디케이터 및 오류 처리를 할 수 있다. 오류의 경우, 기본적으로 queryClient의 mutations property에 onError 콜백을 설정한다. 로딩 인디케이터는 변이 호출 중 현재 해결되지 않은 것이 있는지 알려주는 useIsMutating 훅을 만들어 isMutating 또는 isFetching 상태에서 보여주도록 한다. 예시 코드를 보자. export function generateQueryClient(): QueryClient { return new QueryClient({ defaultOptions: { queries: { onError: queryErrorHandler, staleTime: 600000, /.. React Query와 인증 & setQueryData & initialData useAuth & useUser useAuth 훅은 signin/signup/signout 함수를 제공하여 서버에 있는 사용자를 인증한다. 유저 데이터 저장은 리액트 쿼리에서 하고(이를 위해 'useUser'라는 훅이 필요하다) 서버를 호출할 때 useAuth가 사용자 데이터를 수집하여 이를 보조하는 것이다. useUser 훅은 로컬 스토리지와 쿼리 캐시에서의 유저의 상태를 유지한다. useUser는 로컬스토리지의 데이터를 로딩하여 초기 설정을 한고 유저 데이터가 변하면 리액트 쿼리의 useQuery 훅을 사용하여 서버에서부터 최신 데이터를 가져온다. (useQuery 인스턴스의 쿼리 함수가 로그인 유저의 id와 함께 서버에 요청을 보내면 서버가 그 사용자에 대한 데이터를 보내준다. 만약 로그인 한 사용.. 쿼리 특성 2 : select 옵션을 통한 데이터 filtering과 refetching & polling useQuery의 select 옵션으로 데이터 필터링하기 useQuery 결과에 대하여 select 옵션을 사용하여 결과를 필터링 할 수 있다 . 리액트 쿼리는 불필요한 연산을 줄이는 최적화를 하고 이를 메모이제이션이라고 한다. 리액트 쿼리는 select 함수를 삼중 등호로 비교하여 데이터와 함수가 모두 변경되었을 경우에만 실행된다. 마지막으로 검색한 데이터와 동일한 데이터이고 select 함수에도 변동이 없으면 실행되지 않는다. 따라서 리액트 쿼리가 제공하는 캐시 기능을 잘 활용하기 위해 select 함수에는 안정적인 함수가 필요하고, 이때 익명 함수를 안정적인 함수로 만들기 위해 useCallback 을 사용한다. useQuery({ select: (data) => filteredData; }); 예.. 쿼리 특성 1 : Pre-fetching과 페이지네이션 Pre-fetching(초기 데이터 채우기) 사용자에게 보여주고 싶은 데이터가 있는데 캐시에 아직 데이터가 없는 경우, 리액트 쿼리를 사용하여 새로운 데이터를 가져오기 전에 잠시 데이터를 미리 보여줄 수 있도록, 해당 데이터를 미리 가져와 캐시에 추가하는 방법에 대해 알아보자. where to use? = 미리 채우기 옵션이 사용될 리액트 쿼리 메서드 data from? = 서버 또는 클라이언트 added to cache ? = 캐시 저장 여부 where to use? data from? added to cache ? prefetchQuery method to queryClient server yes setQueryData method to queryClient client yes placeholderD.. 커스텀 쿼리 훅(관심사 분리) & 로딩 / 에러 처리 중앙집중화 커스텀 쿼리 훅 큰 앱들에서는 각 데이터 유형에 커스텀 훅을 만드는 것은 매우 흔하다. 커스텀 쿼리 훅을 사용할 때의 이점은 다음과 같다. 다수의 컴포넌트에서 데이터에 엑세스해야 하는 경우 useQuery 호출을 다시 작성하지 않아도 된다. 다수의 useQuery 호출을 사용했다면 사용 중인 키를 헷갈릴 수 있다. 커스텀 훅을 사용해 호출한다면 키를 헷갈릴 위험이 없다. 사용하길 원하는 쿼리 함수를 혼동할 위험이 없다. 추상화를 통해 관심사 분리를 할 수 있다. 예시 코드는 다음과 같다. api 요청 코드, useQuery 구문을 커스텀 훅 파일에 넣어 관심사를 분리한다. // useTreatments.ts import { useQuery, useQueryClient } from 'react-query'.. useInfiniteQuery 무한 스크롤 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것이다. 한 번에 모든 데이터를 가져오는 것보다 훨씬 효율적이다. 그래서 사용자가 버튼을 클릭하거나 특정 지점을 스크롤 했을 때 데이터를 가져온다. useInfiniteQuery useInfiniteQuery는 페이지네이션과는 다른 API 포맷을 요구한다. 페이지네이션에서는 현재 페이지를 컴포넌트 상태에서 추적했었다. 사용자가 새 페이지를 열기 위해 행동을 하면 쿼리 키를 업데이트하고 쿼리 키가 데이터를 업데이트 하는 방식이였다. 반면에 useInfiniteQuery는 다음 쿼리가 무엇일지 추적한다. 이 경우에는 다음 쿼리가 데이터의 일부로 반환된다. 이 객체는 데이터 배열을 가진 결과라는 프로퍼티를 가진다(results). 또한, 데이터의.. 쿼리 키 & 페이지네이션 & 데이터 pre-fetching & isLoading / isFetching & Mutation 쿼리 키 쿼리 키를 표현하는 방식에는 두 가지가 있다. 문자열 방식 => "post" 배열 방식 => ["comments", post.id] const { data, isLoading, isError, error } = useQuery( ['comments', post.id], () => fetchComments(post.id) ); 만약 배열 방식으로 쿼리 키를 표현한다면 쿼리 키를 쿼리에 대한 종속성 배열로 취급하게 된다. 따라서 쿼리 키가 변경되면 새 쿼리를 생성하여 각각의 staleTime, cacheTime 을 가지게 된다. 배열에 속해있는 값들이 전부 같으면 같은 쿼리라고 인식하여 cache 에 저장되어 있는 데이터를 이용한다. 따라서 데이터를 가져올 때 사용하는 쿼리 함수에 있는 값이 쿼리 .. React Query 개발자 도구 & staleTime vs cacheTime 1. React Query 개발자 도구 React Query 개발자 도구는 쿼리 키로 쿼리를 보여주고 모든 쿼리의 상태(활성, 비활성, 만료 등)를 말해준다. 또한 마지막으로 업데이트된 타임스탬프와 데이터, 쿼리 등을 보여준다. 공식 문서에 따르면 개발자 도구는 프로덕션 번들에 포함되지 않는다. 그러므로 개발 중일 때는 보이고, 프로덕션 모드에서는 보이지 않는다. 아래의 코드를 참고하면 꽃 모양 버튼으로 된 React Query 개발자 도구를 브라우저 하단에서 볼 수 있다. import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-query/devtools'; const q.. 이전 1 2 다음