packages: add @tanstack/react-query

stores: remove user store

Components/Layout/Auth.jsx

@@ -1,5 +1,5 @@
-import { observer } from 'mobx-react-lite';
-import { useStore } from 'stores/hooks';
+import { useQuery } from '@tanstack/react-query';
+import { fetchUser } from 'services/user';
 import styled from 'styled-components';
 import { Flex } from 'UIKit/grid';
 import { min } from 'UIKit/mq';
@@ -18,11 +18,11 @@ const UserText = styled.span`
   }
 `;
 
-const User = observer(() => {
-  const { $user } = useStore();
+function User() {
+  const { data: user } = useQuery(['user'], () => fetchUser());
 
-  return <UserText>{$user?.user?.displayName}</UserText>;
-});
+  return <UserText>{user?.displayName}</UserText>;
+}
 
 const Logout = styled.a`
   margin: 0;

package.json

@@ -18,6 +18,7 @@
     "@ant-design/icons": "^4.7.0",
     "@apollo/client": "^3.6.0",
     "@fontsource/montserrat": "^4.5.12",
+    "@tanstack/react-query": "^4.2.3",
     "antd": "^4.21.3",
     "axios": "^0.26.1",
     "dayjs": "^1.11.2",

pages/_app.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable global-require */
 import { ApolloProvider } from '@apollo/client';
+import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConfigProvider } from 'antd';
 import 'antd/dist/antd.less';
 import { useApollo } from 'apollo/hooks';
@@ -7,6 +8,7 @@ import Layout from 'Components/Layout';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import 'normalize.css';
+import { useMemo } from 'react';
 import StoreProvider from 'stores/Provider';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from 'UIKit/colors';
@@ -22,6 +24,7 @@ if (process.env.NODE_ENV === 'development') {
 
 function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps.initialApolloState);
+  const queryClient = useMemo(() => new QueryClient(), []);
 
   return (
     <ThemeProvider theme={theme}>
@@ -34,11 +37,15 @@ function App({ Component, pageProps }: AppProps) {
       <GlobalStyle />
       <StoreProvider {...pageProps}>
         <ConfigProvider locale={ruRU}>
-          <Layout>
-            <ApolloProvider client={apolloClient}>
-              <Component {...pageProps} />
-            </ApolloProvider>
-          </Layout>
+          <ApolloProvider client={apolloClient}>
+            <QueryClientProvider client={queryClient}>
+              <Hydrate state={pageProps.queryDehydratedState}>
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </Hydrate>
+            </QueryClientProvider>
+          </ApolloProvider>
         </ConfigProvider>
       </StoreProvider>
     </ThemeProvider>

pages/index.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable object-curly-newline */
 import { useApolloClient } from '@apollo/client';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
 import initializeApollo from 'apollo/client';
 import * as Calculation from 'Components/Calculation';
 import Output from 'Components/Output';
@@ -61,24 +62,28 @@ function Home() {
 export const getServerSideProps = async ({ req }) => {
   const { cookie = '' } = req.headers;
 
-  const user = await fetchUser({
+  // prettier-ignore
+  const fetchUserQuery = () => fetchUser({
     headers: {
       cookie,
     },
   });
 
+  const queryClient = new QueryClient();
+
+  const user = await queryClient.fetchQuery(['user'], fetchUserQuery);
+
   const apolloClient = initializeApollo();
 
   const { options: ownerOptions } = await getOwnerData(apolloClient, user);
 
   return {
     props: {
-      user,
       calculation: {
         options: ownerOptions,
       },
-
       initialApolloState: apolloClient.cache.extract(),
+      queryDehydratedState: dehydrate(queryClient),
     },
   };
 };

stores/index.js

@@ -12,9 +12,8 @@ export function initializeStore(initialData) {
   const _store = store ?? new RootStore();
 
   if (initialData) {
-    const { user = null, calculation, tables } = initialData;
+    const { calculation, tables } = initialData;
 
-    _store.$user.hydrate(user);
     if (calculation?.values) _store.$calculation.$values.hydrate(calculation.values);
     if (calculation?.statuses) _store.$calculation.$status.hydrate(calculation.statuses);
     if (calculation?.options) _store.$calculation.$options.hydrate(calculation.options);

stores/root.ts

@@ -3,18 +3,15 @@ import { enableStaticRendering } from 'mobx-react-lite';
 import CalculationStore from './calculation';
 import ResultsStore from './results';
 import TablesStore from './tables';
-import UserStore from './user';
 
 enableStaticRendering(typeof window === 'undefined');
 
 export default class RootStore {
-  $user: UserStore;
   $calculation: CalculationStore;
   $results: ResultsStore;
   $tables: TablesStore;
 
   constructor() {
-    this.$user = new UserStore(this);
     this.$calculation = new CalculationStore(this);
     this.$results = new ResultsStore(this);
     this.$tables = new TablesStore(this);

stores/user.ts

@@ -1,22 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { makeAutoObservable } from 'mobx';
-import { getDomainName } from 'services/user/tools';
-import type { User } from 'services/user/types';
-import type RootStore from './root';
-
-export default class UserStore {
-  root: RootStore;
-  user?: User = undefined;
-
-  constructor(rootStore: RootStore) {
-    makeAutoObservable(this);
-    this.root = rootStore;
-  }
-
-  hydrate = (user: User) => {
-    this.user = user;
-  };
-  get domainName() {
-    return this.user && getDomainName(this.user);
-  }
-}

yarn.lock

@@ -851,6 +851,20 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/query-core@4.2.3":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.2.3.tgz#52d75430c9662cc85c160761c1421de483c7791f"
+  integrity sha512-zdt5lYWs1dZaA3IxJbCgtAfHZJScRZONpiLL7YkeOkrme5MfjQqTpjq7LYbzpyuwPOh2Jx68le0PLl57JFv5hQ==
+
+"@tanstack/react-query@^4.2.3":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.2.3.tgz#782fd0f84553ba6219f1137a12ea28ab8cd3a3f3"
+  integrity sha512-JLaMOxoJTkiAu7QpevRCt2uI/0vd3E8K/rSlCuRgWlcW5DeJDFpDS5kfzmLO5MOcD97fgsJRrDbxDORxR1FdJA==
+  dependencies:
+    "@tanstack/query-core" "4.2.3"
+    "@types/use-sync-external-store" "^0.0.3"
+    use-sync-external-store "^1.2.0"
+
 "@types/cookie@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
@@ -980,6 +994,11 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@typescript-eslint/eslint-plugin@^5.26.0":
   version "5.26.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz#c1f98ccba9d345e38992975d3ca56ed6260643c2"
@@ -6259,6 +6278,11 @@ use-sync-external-store@1.1.0, use-sync-external-store@^1.0.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
   integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"