1. QueryClient 만들기

• 쿼리와 서버의 데이터 캐시를 관리하는 클라이언트

2. Query Provider

• 자녀 컴포넌트에 서버 데이터의 캐시와 클라이언트 구성을 제공할 수 있다.

1. Query Client로 감싸는 의의

• 클라이언트가 가지고 있는 캐시와 모든 기본옵션을 가질 수 있게 해준다. (자녀 컴포넌트도 사용가능)

import {QueryClient, QueryClientProvider} from 'react-query';

function App() {
  const queryClient = new QueryClient();
  return (
    // provide React Query client to App
    <QueryClientProvider client={queryClient}>
      <div className="App">
      <h1>Blog Posts</h1>
      <Posts />
    </div>
    </QueryClientProvider>
  );
}

<aside> ♻️ 이제 자녀 컴포넌트에서 React-query 훅을 사용 할 수 있게 되었다.

</aside>

react-query훅은 서버에서 데이터를 가져올때 사용하는 훅이다.

useQuery는 다양한 속성을 가진 객체를 반환한다.

const {data} = useQuery("posts", fetchPosts);

useQuery훅이 필요한것

1. 쿼리 키 = 쿼리 이름
2. 쿼리 함수 = 데이터를 가져오는 비동기 함수, 캐시 데이터를 가져오는 방법

처음에 data로 map을 돌리는 부분에서 오류가 나는 이유?

• fetchPosts는 비동기 함수 이기때문에 fetchPosts가 해결될때까지 data 는 정의 되지 않을 것이다.