react-query는 기본적으로 메모리에만 데이터를 저장하고 다른 곳에는 저장하지 않습니다. 즉 브라우저를 새로고침하면 캐시가 사라집니다. 만약 데이터를 남기고 싶다면 localstorage와 같은 외부 저장소에 캐시를 저장하는 방법인 persisters를 읽어보세요.

일반적으로 QueryCache는 직접 상호작용하지 않고 대신 QueryClient에서 사용합니다.

Query

캐시에는 쿼리들이 있으며 쿼리에서 대부분의 로직이 실행됩니다. 여기에는 쿼리에 대한 모든 정보(데이터, 상태, 필드 또는 마지막 refetching이 발생한 시점)이 포함될 뿐 아니라 쿼리 함수를 실행하고 재시도, 취소, 및 중복 제거 로직이 포함됩니다.

쿼리에는 우리가 불가능한 상태에 빠지지 않도록 하는 내부 상태머신이 존재하며, 예를 들어 이미 fetching을 수행하는 동안 쿼리 함수를 트리해야 하는 경우 fetching에서 중복을 제거할 수 있습니다.

가장 중요한 것은, 쿼리ㄴ가 누가 쿼리 데이터에 관심이 있는지를 알고 해당 관찰자에게 모든 변경사항을 알릴 수 있다는 점입니다.

QueryObserver

Observer는 쿼리와 이를 사용하려는 컴포넌트 사이의 접착제 입니다. Observer는 useQuery를 호출할 때 생성되며 항상 정확히 하나의 쿼리를 구독합니다. 그렇기 떄문에 useQusery에 queryKey를 전달해야 합니다.

Observer는 대부분의 최적화가 이루어지는 곳입니다. Observer는 컴포넌트가 사용중인 쿼리의 속성을 알고 있으므로 관련 없는 변경 사항을 알릴 필요가 없습니다.

•

ex) 데이터 필드만 사용하는 경우 백그라운드 refetch에서 isFethcing이 변경되는 경우 다시 렌더링할 필요없다

1. 목차

NOTE

•

import './App.css';
import { QueryClientProvider } from '@tanstack/react-query';
import MainLayout from './layouts/MainLayout.tsx';
import { ChakraProvider } from '@chakra-ui/react';
import { queryClient } from '@testcomponents/BH/util';
import TestTheme from '@assets/theme/TestTheme.tsx';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// import './i18n'; // i18n 설정을 임포트합니다.
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider resetCSS={true} theme={TestTheme}>
        <MainLayout />
      </ChakraProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;
YAML
복사