refactor(react-query): 🔍 replaced swr (#83)

package.json

@@ -40,18 +40,17 @@
     "framer-motion": "4.1.17",
     "next": "11.1.1",
     "next-seo": "4.26.0",
-    "object-fit-images": "3.2.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-flatpickr": "3.10.7",
     "react-hook-form": "7.11.1",
     "react-id-generator": "3.0.1",
     "react-lazyload": "3.2.0",
+    "react-query": "3.21.1",
     "react-select": "4.3.1",
     "sitemap": "7.0.0",
     "styled-components": "5.3.0",
     "styled-system": "5.1.5",
-    "swr": "0.5.6",
     "system-props": "0.20.0",
     "yup": "0.32.9"
   },

src/components/common/Providers/index.tsx

@@ -1,9 +1,24 @@
-import { FC } from 'react';
+import { ReactNode, useState } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Hydrate } from 'react-query/hydration';
 import { ThemeProvider } from 'styled-components';
 
 import theme from '~styles/theme';
 
+type ProviderProps = {
+  pageProps: any;
+  children: ReactNode;
+};
+
 // All global context providers
-export const Providers: FC = ({ children }) => {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+export const Providers = ({ pageProps, children }: ProviderProps) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Hydrate state={pageProps.dehydratedState}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </Hydrate>
+    </QueryClientProvider>
+  );
 };

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { DefaultSeo } from 'next-seo';
-import App from 'next/app';
-import objectFitImages from 'object-fit-images';
+import { AppProps } from 'next/app';
+import { ReactQueryDevtools } from 'react-query/devtools';
 
 import { Providers } from '~components';
 import { seo } from '~config';
@@ -13,19 +13,15 @@ if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
   initSentry();
 }
 
-export default class MyApp extends App {
-  componentDidMount() {
-    objectFitImages();
-  }
+const MyApp = ({ pageProps, Component }: AppProps) => {
+  return (
+    <Providers pageProps={pageProps}>
+      <CSSreset />
+      <DefaultSeo {...seo} />
+      <Component {...pageProps} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </Providers>
+  );
+};
 
-  render() {
-    const { Component, pageProps } = this.props;
-    return (
-      <Providers>
-        <CSSreset />
-        <DefaultSeo {...seo} />
-        <Component {...pageProps} />
-      </Providers>
-    );
-  }
-}
+export default MyApp;