diff --git a/Components/Layout/Auth.jsx b/Components/Layout/Auth.jsx
index 5f2755b..dad2ff9 100644
--- a/Components/Layout/Auth.jsx
+++ b/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 {$user?.user?.displayName};
-});
+ return {user?.displayName};
+}
const Logout = styled.a`
margin: 0;
diff --git a/package.json b/package.json
index c96578c..48e8613 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3e36f52..4814696 100644
--- a/pages/_app.tsx
+++ b/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 (
@@ -34,11 +37,15 @@ function App({ Component, pageProps }: AppProps) {
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/pages/index.jsx b/pages/index.jsx
index c93dcd9..5933779 100644
--- a/pages/index.jsx
+++ b/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),
},
};
};
diff --git a/stores/index.js b/stores/index.js
index 0cbe3ae..d732c6c 100644
--- a/stores/index.js
+++ b/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);
diff --git a/stores/root.ts b/stores/root.ts
index 5a852c4..4c1f6eb 100644
--- a/stores/root.ts
+++ b/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);
diff --git a/stores/user.ts b/stores/user.ts
deleted file mode 100644
index 02d64cc..0000000
--- a/stores/user.ts
+++ /dev/null
@@ -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);
- }
-}
diff --git a/yarn.lock b/yarn.lock
index 97c2c3b..8d4a8ce 100644
--- a/yarn.lock
+++ b/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"