15.3.3 QueryClientProvider 사용하기

리액트 쿼리를 프로젝트에서 사용하기 전에 최상위 컴포넌트를 QueryClientProvider로 꼭 감싸줘야 합니다. QueryClientProvider는 리액트 쿼리에서 캐시를 관리할 때 사용하는 QueryClient 인스턴스를 자식 컴포넌트에서 사용할 수 있게 해줍니다.

App 컴포넌트를 다음과 같이 수정하세요.

App.tsx

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './screens/RootStack';
import {QueryClient, QueryClientProvider} from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    </QueryClientProvider>
  );
}

export default App;