pages/_app: beautify apollo & query clients usages

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;
+}

apollo/hooks.js

@@ -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;
-}

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 { initialApolloState, initialQueryState } = pageProps;
-  const queryClient = useMemo(() => new QueryClient(), []);
+  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>
-                <Layout>
+                <Component {...pageProps} />
-                  <Component {...pageProps} />
+              </Layout>
-                </Layout>
-              </Hydrate>
             </QueryClientProvider>
           </ApolloProvider>
         </ConfigProvider>

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),
     },
   };
 };