From 954509566283bc1e0a86026058d7a0f84e4fe178 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 31 Aug 2022 16:39:01 +0300
Subject: [PATCH] pages/_app: beautify apollo & query clients usages

---
 api/client.js   |  9 +++++++++
 apollo/hooks.js |  9 ---------
 pages/_app.tsx  | 18 +++++++++---------
 pages/index.jsx |  5 +----
 4 files changed, 19 insertions(+), 22 deletions(-)
 create mode 100644 api/client.js
 delete mode 100644 apollo/hooks.js

diff --git a/api/client.js b/api/client.js
new file mode 100644
index 0000000..44b939f
--- /dev/null
+++ b/api/client.js
@@ -0,0 +1,9 @@
+import { hydrate, QueryClient } from '@tanstack/react-query';
+
+export default function initializeQueryClient(initialState) {
+  const client = new QueryClient();
+
+  hydrate(client, initialState);
+
+  return client;
+}
diff --git a/apollo/hooks.js b/apollo/hooks.js
deleted file mode 100644
index b1de89f..0000000
--- a/apollo/hooks.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useMemo } from 'react';
-import initializeApollo from './client';
-
-export function useApollo(initialState) {
-  const client = useMemo(() => initializeApollo(initialState), [initialState]);
-
-  return client;
-}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4814696..d08241a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable global-require */
 import { ApolloProvider } from '@apollo/client';
-import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ConfigProvider } from 'antd';
 import 'antd/dist/antd.less';
-import { useApollo } from 'apollo/hooks';
 import Layout from 'Components/Layout';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -17,14 +16,17 @@ import '../styles/fonts.css';
 import '../styles/globals.css';
 
 import ruRU from 'antd/lib/locale/ru_RU';
+import initializeQueryClient from 'api/client';
+import initializeApollo from 'apollo/client';
 
 if (process.env.NODE_ENV === 'development') {
   require('../mocks');
 }
 
 function App({ Component, pageProps }: AppProps) {
-  const apolloClient = useApollo(pageProps.initialApolloState);
-  const queryClient = useMemo(() => new QueryClient(), []);
+  const { initialApolloState, initialQueryState } = pageProps;
+  const apolloClient = useMemo(() => initializeApollo(initialApolloState), [initialApolloState]);
+  const queryClient = useMemo(() => initializeQueryClient(initialQueryState), [initialQueryState]);
 
   return (
     <ThemeProvider theme={theme}>
@@ -39,11 +41,9 @@ function App({ Component, pageProps }: AppProps) {
         <ConfigProvider locale={ruRU}>
           <ApolloProvider client={apolloClient}>
             <QueryClientProvider client={queryClient}>
-              <Hydrate state={pageProps.queryDehydratedState}>
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
-              </Hydrate>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
             </QueryClientProvider>
           </ApolloProvider>
         </ConfigProvider>
diff --git a/pages/index.jsx b/pages/index.jsx
index f5bbb04..5fecf1e 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -61,7 +61,6 @@ function Home() {
 
 export const getServerSideProps = async ({ req }) => {
   const { cookie = '' } = req.headers;
-
   // prettier-ignore
   const queryGetUser = () => getUser({
     headers: {
@@ -70,11 +69,9 @@ export const getServerSideProps = async ({ req }) => {
   });
 
   const queryClient = new QueryClient();
-
   const user = await queryClient.fetchQuery(['user'], queryGetUser);
 
   const apolloClient = initializeApollo();
-
   const { options: ownerOptions } = await getOwnerData(apolloClient, user);
 
   return {
@@ -83,7 +80,7 @@ export const getServerSideProps = async ({ req }) => {
         options: ownerOptions,
       },
       initialApolloState: apolloClient.cache.extract(),
-      queryDehydratedState: dehydrate(queryClient),
+      initialQueryState: dehydrate(queryClient),
     },
   };
 };