fix: react-query installation (#2255)

* fix: react-query installation

* fix review

pwa/components/common/Layout.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useState } from "react";
+import {
+  DehydratedState,
+  Hydrate,
+  QueryClient,
+  QueryClientProvider,
+} from "react-query";
+
+const Layout = ({
+  children,
+  dehydratedState,
+}: {
+  children: ReactNode;
+  dehydratedState: DehydratedState;
+}) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Hydrate state={dehydratedState}>{children}</Hydrate>
+    </QueryClientProvider>
+  );
+};
+
+export default Layout;

pwa/pages/_app.tsx

@@ -1,10 +1,14 @@
-import '../styles/globals.css'
+import "../styles/globals.css"
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap-icons/font/bootstrap-icons.css"
-import type { AppProps } from 'next/app'
+import Layout from "../components/common/Layout"
+import type { AppProps } from "next/app"
+import type { DehydratedState } from "react-query"
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+function MyApp({ Component, pageProps }: AppProps<{dehydratedState: DehydratedState}>) {
+  return <Layout dehydratedState={pageProps.dehydratedState}>
+    <Component {...pageProps} />
+  </Layout>
 }
 
 export default MyApp