use ssg

apps/web/Components/Layout/Auth.jsx

@@ -1,4 +1,5 @@
 import { getUser } from '@/api/user/query';
+import { STALE_TIME } from '@/constants/request';
 import { min } from '@/styles/mq';
 import { useQuery } from '@tanstack/react-query';
 import styled from 'styled-components';
@@ -19,8 +20,8 @@ const UserText = styled.span`
 `;
 
 function User() {
-  const { data: user } = useQuery(['user'], () => getUser(), {
-    enabled: false,
+  const { data: user } = useQuery(['user'], getUser, {
+    staleTime: STALE_TIME,
   });
 
   return <UserText>{user?.displayName}</UserText>;

apps/web/constants/request.js

@@ -1 +1,10 @@
-export const STALE_TIME = Number.POSITIVE_INFINITY;
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+dayjs.extend(duration);
+
+export const STALE_TIME = dayjs
+  .duration({
+    days: 1,
+  })
+  .as('milliseconds');

apps/web/pages/index.jsx

@@ -1,12 +1,9 @@
-import { getUser } from '@/api/user/query';
-import initializeApollo from '@/apollo/client';
 import * as Calculation from '@/Components/Calculation';
 import { CRMError } from '@/Components/Common/Error';
 import Output from '@/Components/Output';
 import { useDefaultReactions } from '@/config/process';
 import * as init from '@/process/init';
 import { min } from '@/styles/mq';
-import { dehydrate, QueryClient } from '@tanstack/react-query';
 import Head from 'next/head';
 import styled from 'styled-components';
 import { Box } from 'ui/grid';
@@ -38,6 +35,7 @@ const Grid = styled(Box)`
 function Home({ error }) {
   init.useMainData();
   init.useInsuranceData();
+  init.useInitialData();
   useDefaultReactions();
 
   if (error) return <CRMError error={error} />;
@@ -53,41 +51,9 @@ function Home({ error }) {
     </Grid>
   );
 }
-/** @type {import('next').GetServerSideProps} */
-export const getServerSideProps = async ({ req }) => {
-  const { cookie = '' } = req.headers;
-  const queryGetUser = () =>
-    getUser({
-      headers: {
-        cookie,
-      },
+/** @type {import('next').GetStaticProps} */
+export const getStaticProps = async () => ({
+  props: {},
 });
 
-  const queryClient = new QueryClient();
-  const user = await queryClient.fetchQuery(['user'], queryGetUser);
-
-  const apolloClient = initializeApollo();
-
-  try {
-    const { values, options } = await init.getInitialData(apolloClient, user);
-
-    return {
-      props: {
-        calculation: {
-          options,
-          values,
-        },
-        initialApolloState: apolloClient.cache.extract(),
-        initialQueryState: dehydrate(queryClient),
-      },
-    };
-  } catch (error) {
-    return {
-      props: {
-        error: JSON.stringify(error),
-      },
-    };
-  }
-};
-
 export default Home;

apps/web/process/init/get-initial-data.js

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { getUser } from '@/api/user/query';
+import { STALE_TIME } from '@/constants/request';
+import * as CRMTypes from '@/graphql/crm.types';
+import { useStore } from '@/stores/hooks';
+import { useApolloClient } from '@apollo/client';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { normalizeOptions } from 'tools';
+
+/**
+ * @param {import('@apollo/client').ApolloClient} apolloClient
+ * @param {import('@/api/user/types').User } user
+ * @param {*} onCompleted
+ */
+export function getInitialData({ query }, user, onCompleted) {
+  query({ query: CRMTypes.GetLeadsDocument, variables: { domainname: user.domainName } }).then(
+    ({ data }) => {
+      onCompleted({
+        selectLead: data?.leads,
+      });
+    }
+  );
+
+  query({
+    query: CRMTypes.GetOpportunitiesDocument,
+    variables: { domainname: user.domainName },
+  }).then(({ data }) => {
+    onCompleted({
+      selectOpportunity: data?.opportunities,
+    });
+  });
+
+  query({
+    query: CRMTypes.GetTransactionCurrenciesDocument,
+  }).then(({ data }) => {
+    onCompleted({
+      selectSupplierCurrency: data?.transactioncurrencies,
+    });
+
+    const transactioncurrency_rub = data?.transactioncurrencies?.find(
+      (x) => x?.isocurrencycode === 'RUB'
+    );
+
+    onCompleted(null, {
+      supplierCurrency: transactioncurrency_rub?.value,
+    });
+  });
+}
+
+export function useInitialData() {
+  const { $calculation } = useStore();
+  const apolloClient = useApolloClient();
+  const { data: user } = useQuery(['user'], getUser, { staleTime: STALE_TIME });
+
+  function handleOnCompleted(options, values) {
+    if (options)
+      Object.keys(options).forEach((elementName) => {
+        const elementOptions = options[elementName];
+        $calculation.element(elementName).setOptions(normalizeOptions(elementOptions));
+      });
+
+    if (values) $calculation.$values.hydrate(values);
+  }
+
+  useEffect(() => {
+    if (user) getInitialData(apolloClient, user, handleOnCompleted);
+  }, [user]);
+}

apps/web/process/init/get-initial-data.ts

@@ -1,44 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { User } from '@/api/user/types';
-import * as CRMTypes from '@/graphql/crm.types';
-import type { ApolloClient } from '@apollo/client';
-
-export async function getInitialData({ query }: ApolloClient<object>, user: User) {
-  const {
-    data: { leads },
-  } = await query({ query: CRMTypes.GetLeadsDocument, variables: { domainname: user.domainName } });
-
-  const {
-    data: { opportunities },
-  } = await query({
-    query: CRMTypes.GetOpportunitiesDocument,
-    variables: { domainname: user.domainName },
-  });
-
-  const {
-    data: { transactioncurrencies },
-  } = await query({
-    query: CRMTypes.GetTransactionCurrenciesDocument,
-  });
-
-  const transactioncurrency_rub = transactioncurrencies?.find((x) => x?.isocurrencycode === 'RUB');
-
-  if (transactioncurrency_rub?.transactioncurrencyid)
-    await query({
-      query: CRMTypes.GetTransactionCurrencyDocument,
-      variables: {
-        currencyid: transactioncurrency_rub?.transactioncurrencyid,
-      },
-    });
-
-  return {
-    options: {
-      selectLead: leads,
-      selectOpportunity: opportunities,
-      selectSupplierCurrency: transactioncurrencies,
-    },
-    values: {
-      supplierCurrency: transactioncurrency_rub?.transactioncurrencyid ?? null,
-    },
-  };
-}

apps/web/trpc/client.ts

@@ -26,7 +26,6 @@ export const trpcClient = createTRPCNext<AppRouter>({
       transformer: SuperJSON,
     };
   },
-  ssr: true,
 });
 
 export const trpcPureClient = createTRPCProxyClient<AppRouter>({