React Query useQuery

react query v4 설치

yarn add @tanstack/react-query

react query 브라우저 호환

아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다.

Chrome >= 73
Firefox >= 78
Edge >= 79
Safari >= 12.0
iOS >= 12.0
opera >= 53

react query 설정하기

1. quertClient를 모든 컴포넌트가 접근하는 CRA는 app.tsx, Next.js는 _app.tsx에 적용한다.

Next.js를 사용하기에 _app.tsx에 적용.

function MyApp({ Component, pageProps }: any) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </Hydrate>
    </QueryClientProvider>
  );
}

2. 나는 Hydration를 사용했다.

• Hydration 은 미리 서버에서 여러 쿼리를 미리 가져온 다음 해당 쿼리는 queryClient로 디하이드레이션을 진행한다.
• 이는 서버가 페이지 로드시 즉시 사용할 수 있는 마크업을 사전렌더링을 할수 있다.

react query 사용하기

1. 먼저, serverSideProps OR StaticProps로 prefetchQuery를 사용해 미리 데이터를 받아온다.

export async function getStaticProps() {
  const queryClient = new QueryClient();

   queryClient.([], getPosts);

   {
    : {
      : (queryClient),
    },
  };
}