feat: 文章详情添加日期

2021-07-03 22:36:38 +08:00 · 2021-07-03 22:36:38 +08:00 · 959a2e9a33
commit 959a2e9a33
parent 2b4c8b432d
9 changed files with 451 additions and 185 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "superjson"
+  ]
+}
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,4 @@
+module.exports = {
+  presets: ["next/babel"],
+  plugins: ["superjson-next"],
+};
--- a/codegen.yml
+++ b/codegen.yml
@ -6,6 +6,6 @@ generates:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
-  ./graphql.schema.json:
+  commons/graphql/graphql.schema.json:
    plugins:
      - "introspection"
--- a/commons/graphql/client.ts
+++ b/commons/graphql/client.ts
@ -1,19 +1,28 @@
 import { useMemo } from "react";
 import {
  ApolloClient,
+  ApolloLink,
  from,
  HttpLink,
  InMemoryCache,
  NormalizedCacheObject,
 } from "@apollo/client";
 import { concatPagination } from "@apollo/client/utilities";
-import { equals, mergeDeepWith } from "ramda";
+import { clone, equals, mergeDeepWith } from "ramda";
 import { onError } from "@apollo/client/link/error";
+import { buildClientSchema, IntrospectionQuery } from "graphql";
+import { DateTimeResolver } from "graphql-scalars";
+import introspectionResult from "./graphql.schema.json"; // schema 文件
+import { withScalars } from "apollo-link-scalars";
+import superjson from "superjson";

-export const client = new ApolloClient({
-  uri: "/api/graphql",
-  cache: new InMemoryCache(),
-});
+const schema = buildClientSchema(
+  introspectionResult as unknown as IntrospectionQuery
+);
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};

 export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";

@ -21,12 +30,10 @@ let apolloClient: ApolloClient<NormalizedCacheObject>;

 function createApolloClient() {
  const httpLink = new HttpLink({
-      uri:
-        typeof window === "undefined"
-          ? process.env.BACKEND_URI
-          : "/api/graphql", // Server URL (must be absolute)
-      credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
-    });
+    uri:
+      typeof window === "undefined" ? process.env.BACKEND_URI : "/api/graphql", // Server URL (must be absolute)
+    credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
+  });

  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
@ -40,7 +47,11 @@ function createApolloClient() {
  });
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
-    link: from([errorLink, httpLink]),
+    link: from([
+      errorLink,
+      withScalars({ schema, typesMap }) as ApolloLink,
+      httpLink,
+    ]),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
@ -66,10 +77,7 @@ export function initializeApollo(initialState = null) {
    const data = mergeDeepWith(
      (a, b) => {
        if (Array.isArray(a) && Array.isArray(b)) {
-          return [
-            ...a,
-            ...b.filter((bi) => a.every((ai) => !equals(ai, bi))),
-          ];
+          return [...a, ...b.filter((bi) => a.every((ai) => !equals(ai, bi)))];
        } else {
          return b;
        }
@ -91,7 +99,7 @@ export function initializeApollo(initialState = null) {

 export function addApolloState(client, pageProps) {
  if (pageProps?.props) {
-    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
+    pageProps.props[APOLLO_STATE_PROP_NAME] = clone(client.cache.extract());
  }

  return pageProps;
--- a/commons/graphql/graphql.schema.json
+++ b/commons/graphql/graphql.schema.json
--- a/package-lock.json
+++ b/package-lock.json
@ -8,15 +8,20 @@
      "version": "0.1.0",
      "dependencies": {
        "@apollo/client": "^3.3.16",
+        "apollo-link-scalars": "^2.1.3",
+        "babel-plugin-superjson-next": "^0.3.0",
        "classnames": "^2.2.6",
+        "date-fns": "^2.22.1",
        "graphql": "^15.5.0",
+        "graphql-scalars": "^1.10.0",
        "highlight.js": "^11.0.1",
        "next": "10.2.0",
        "postcss-import": "^14.0.1",
        "postcss-nested": "^5.0.5",
        "ramda": "^0.27.1",
        "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "superjson": "^1.7.4"
      },
      "devDependencies": {
        "@graphql-codegen/cli": "1.21.4",
@ -24,13 +29,8 @@
        "@graphql-codegen/typescript": "1.22.0",
        "@graphql-codegen/typescript-operations": "1.17.16",
        "@graphql-codegen/typescript-react-apollo": "2.2.4",
-        "@types/autoprefixer": "^10.2.0",
-        "@types/classnames": "^2.3.1",
-        "@types/graphql": "^14.5.0",
-        "@types/highlight.js": "^10.1.0",
+        "@types/date-fns": "^2.6.0",
        "@types/postcss-import": "^12.0.0",
-        "@types/postcss-nested": "^4.2.3",
-        "@types/ramda": "^0.27.40",
        "@types/react": "^17.0.4",
        "@types/tailwindcss": "^2.0.2",
        "autoprefixer": "^10.2.5",
@ -372,7 +372,6 @@
      "version": "7.13.12",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.13.12"
      }
@ -381,7 +380,6 @@
      "version": "7.14.0",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.0.tgz",
      "integrity": "sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.14.0",
        "to-fast-properties": "^2.0.0"
@ -638,9 +636,12 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
    },
    "node_modules/@babel/helper-validator-option": {
      "version": "7.12.17",
@ -2339,44 +2340,14 @@
        "node": ">= 6"
      }
    },
-    "node_modules/@types/autoprefixer": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
-      "integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
-      "deprecated": "This is a stub types definition. autoprefixer provides its own type definitions, so you do not need this installed.",
+    "node_modules/@types/date-fns": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
+      "integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
+      "deprecated": "This is a stub types definition for date-fns (https://github.com/date-fns/date-fns). date-fns provides its own type definitions, so you don't need @types/date-fns installed!",
      "dev": true,
      "dependencies": {
-        "autoprefixer": "*"
-      }
-    },
-    "node_modules/@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "classnames": "*"
-      }
-    },
-    "node_modules/@types/graphql": {
-      "version": "14.5.0",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
-      "integrity": "sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==",
-      "deprecated": "This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "graphql": "*"
-      }
-    },
-    "node_modules/@types/highlight.js": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
-      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
-      "deprecated": "This is a stub types definition. highlight.js provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "highlight.js": "*"
+        "date-fns": "*"
      }
    },
    "node_modules/@types/http-proxy-agent": {
@ -2468,31 +2439,12 @@
        "node": ">=6"
      }
    },
-    "node_modules/@types/postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
-      "deprecated": "This is a stub types definition. postcss-nested provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "postcss-nested": "*"
-      }
-    },
    "node_modules/@types/prop-types": {
      "version": "15.7.3",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
      "dev": true
    },
-    "node_modules/@types/ramda": {
-      "version": "0.27.40",
-      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.40.tgz",
-      "integrity": "sha512-V99ZfTH2tqVYdLDAlgh2uT+N074HPgqnAsMjALKSBqogYd0HbuuGMqNukJ6fk9Ml/Htaus76fsc4Yh3p7q1VdQ==",
-      "dev": true,
-      "dependencies": {
-        "ts-toolbelt": "^6.15.1"
-      }
-    },
    "node_modules/@types/react": {
      "version": "17.0.4",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
@ -2717,6 +2669,35 @@
        "node": ">= 8"
      }
    },
+    "node_modules/apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "dependencies": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "peerDependencies": {
+        "graphql": "14.x || 15.x"
+      }
+    },
    "node_modules/arg": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@ -2902,6 +2883,35 @@
        "object.assign": "^4.1.0"
      }
    },
+    "node_modules/babel-plugin-superjson-next": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.3.0.tgz",
+      "integrity": "sha512-fTE8uWUy9OJG7PkRNP094XDdieoBsZR2iatxurbNqLyd4INXpwuuQ246iLu4+dAeQHtGhOJZxsPR8KdbNvdnlQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/types": "^7.13.17",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "next": ">=9.0.0",
+        "superjson": "1.x"
+      }
+    },
+    "node_modules/babel-plugin-superjson-next/node_modules/@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/babel-plugin-syntax-jsx": {
      "version": "6.18.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@ -3787,10 +3797,16 @@
      "dev": true
    },
    "node_modules/date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
-      "dev": true
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
    },
    "node_modules/debounce": {
      "version": "1.2.1",
@ -4750,6 +4766,25 @@
        "node": ">= 6"
      }
    },
+    "node_modules/graphql-scalars": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "dependencies": {
+        "tslib": "~2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/graphql-scalars/node_modules/tslib": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+    },
    "node_modules/graphql-tag": {
      "version": "2.12.4",
      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@ -6027,6 +6062,12 @@
        "node": ">=4"
      }
    },
+    "node_modules/listr-verbose-renderer/node_modules/date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+      "dev": true
+    },
    "node_modules/listr-verbose-renderer/node_modules/figures": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@ -6108,12 +6149,37 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "node_modules/lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "node_modules/lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
+    "node_modules/lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
    "node_modules/lodash.get": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
      "dev": true
    },
+    "node_modules/lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
    "node_modules/lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@ -6132,11 +6198,15 @@
      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
      "dev": true
    },
+    "node_modules/lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
    "node_modules/lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
-      "dev": true
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
    },
    "node_modules/lodash.isplainobject": {
      "version": "4.0.6",
@ -6147,8 +6217,22 @@
    "node_modules/lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
-      "dev": true
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "node_modules/lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
+    },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
@ -6156,6 +6240,16 @@
      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
      "dev": true
    },
+    "node_modules/lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
    "node_modules/lodash.sortby": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@ -6173,6 +6267,11 @@
      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
      "dev": true
    },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
    "node_modules/log-symbols": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@ -8619,6 +8718,39 @@
        "stylis": "^3.5.0"
      }
    },
+    "node_modules/superjson": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.7.4.tgz",
+      "integrity": "sha512-A6DYTe04+x4L9NPywHeGZNy6/gLe8qqKCwhEfTH9M4eXpTjiTsF83JZ3j4hwXx1ogRb4779nWxsDlJGIECOJkw==",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "lodash.clonedeep": "^4.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/superjson/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/superjson/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -8968,12 +9100,6 @@
        }
      }
    },
-    "node_modules/ts-toolbelt": {
-      "version": "6.15.5",
-      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
-      "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
-      "dev": true
-    },
    "node_modules/tslib": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@ -9445,6 +9571,15 @@
      "version": "0.8.15",
      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "dependencies": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
    }
  },
  "dependencies": {
@ -9740,7 +9875,6 @@
      "version": "7.13.12",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
-      "dev": true,
      "requires": {
        "@babel/types": "^7.13.12"
      },
@ -9749,7 +9883,6 @@
          "version": "7.14.0",
          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.0.tgz",
          "integrity": "sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==",
-          "dev": true,
          "requires": {
            "@babel/helper-validator-identifier": "^7.14.0",
            "to-fast-properties": "^2.0.0"
@ -9992,9 +10125,9 @@
      }
    },
    "@babel/helper-validator-identifier": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
    },
    "@babel/helper-validator-option": {
      "version": "7.12.17",
@ -11439,40 +11572,13 @@
      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
      "dev": true
    },
-    "@types/autoprefixer": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/@types/autoprefixer/-/autoprefixer-10.2.0.tgz",
-      "integrity": "sha512-ClU0uw3HhUra890K4xcf2IQxD6w0WOjPIaKb8jrRXYPHvvUW1P5dGufPlDtTo5gtWPWH+4L6tSBAoAKVf93uBQ==",
+    "@types/date-fns": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz",
+      "integrity": "sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=",
      "dev": true,
      "requires": {
-        "autoprefixer": "*"
-      }
-    },
-    "@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "dev": true,
-      "requires": {
-        "classnames": "*"
-      }
-    },
-    "@types/graphql": {
-      "version": "14.5.0",
-      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
-      "integrity": "sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==",
-      "dev": true,
-      "requires": {
-        "graphql": "*"
-      }
-    },
-    "@types/highlight.js": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
-      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
-      "dev": true,
-      "requires": {
-        "highlight.js": "*"
+        "date-fns": "*"
      }
    },
    "@types/http-proxy-agent": {
@ -11553,30 +11659,12 @@
        }
      }
    },
-    "@types/postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
-      "dev": true,
-      "requires": {
-        "postcss-nested": "*"
-      }
-    },
    "@types/prop-types": {
      "version": "15.7.3",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
      "dev": true
    },
-    "@types/ramda": {
-      "version": "0.27.40",
-      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.40.tgz",
-      "integrity": "sha512-V99ZfTH2tqVYdLDAlgh2uT+N074HPgqnAsMjALKSBqogYd0HbuuGMqNukJ6fk9Ml/Htaus76fsc4Yh3p7q1VdQ==",
-      "dev": true,
-      "requires": {
-        "ts-toolbelt": "^6.15.1"
-      }
-    },
    "@types/react": {
      "version": "17.0.4",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
@ -11758,6 +11846,29 @@
        "picomatch": "^2.0.4"
      }
    },
+    "apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "requires": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      }
+    },
    "arg": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@ -11897,6 +12008,27 @@
        "object.assign": "^4.1.0"
      }
    },
+    "babel-plugin-superjson-next": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-superjson-next/-/babel-plugin-superjson-next-0.3.0.tgz",
+      "integrity": "sha512-fTE8uWUy9OJG7PkRNP094XDdieoBsZR2iatxurbNqLyd4INXpwuuQ246iLu4+dAeQHtGhOJZxsPR8KdbNvdnlQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/types": "^7.13.17",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
    "babel-plugin-syntax-jsx": {
      "version": "6.18.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@ -12670,10 +12802,9 @@
      "dev": true
    },
    "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
-      "dev": true
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
    },
    "debounce": {
      "version": "1.2.1",
@ -13452,6 +13583,21 @@
        }
      }
    },
+    "graphql-scalars": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "requires": {
+        "tslib": "~2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
    "graphql-tag": {
      "version": "2.12.4",
      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@ -14411,6 +14557,12 @@
            "restore-cursor": "^2.0.0"
          }
        },
+        "date-fns": {
+          "version": "1.30.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+          "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+          "dev": true
+        },
        "figures": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@ -14470,12 +14622,37 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
+    "lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
    "lodash.get": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
      "dev": true
    },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
    "lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@ -14494,11 +14671,15 @@
      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
      "dev": true
    },
+    "lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
    "lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
-      "dev": true
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
    },
    "lodash.isplainobject": {
      "version": "4.0.6",
@ -14509,8 +14690,22 @@
    "lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
-      "dev": true
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
+    },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
    },
    "lodash.once": {
      "version": "4.1.1",
@ -14518,6 +14713,16 @@
      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
      "dev": true
    },
+    "lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
    "lodash.sortby": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@ -14535,6 +14740,11 @@
      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
      "dev": true
    },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
    "log-symbols": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@ -16496,6 +16706,30 @@
      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
      "requires": {}
    },
+    "superjson": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.7.4.tgz",
+      "integrity": "sha512-A6DYTe04+x4L9NPywHeGZNy6/gLe8qqKCwhEfTH9M4eXpTjiTsF83JZ3j4hwXx1ogRb4779nWxsDlJGIECOJkw==",
+      "requires": {
+        "debug": "^4.3.1",
+        "lodash.clonedeep": "^4.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -16758,12 +16992,6 @@
      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
      "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw=="
    },
-    "ts-toolbelt": {
-      "version": "6.15.5",
-      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
-      "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
-      "dev": true
-    },
    "tslib": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@ -17127,6 +17355,15 @@
      "version": "0.8.15",
      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "requires": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -11,15 +11,20 @@
  },
  "dependencies": {
    "@apollo/client": "^3.3.16",
+    "apollo-link-scalars": "^2.1.3",
+    "babel-plugin-superjson-next": "^0.3.0",
    "classnames": "^2.2.6",
+    "date-fns": "^2.22.1",
    "graphql": "^15.5.0",
+    "graphql-scalars": "^1.10.0",
    "highlight.js": "^11.0.1",
    "next": "10.2.0",
    "postcss-import": "^14.0.1",
    "postcss-nested": "^5.0.5",
    "ramda": "^0.27.1",
    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "superjson": "^1.7.4"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "1.21.4",
@ -27,13 +32,8 @@
    "@graphql-codegen/typescript": "1.22.0",
    "@graphql-codegen/typescript-operations": "1.17.16",
    "@graphql-codegen/typescript-react-apollo": "2.2.4",
-    "@types/autoprefixer": "^10.2.0",
-    "@types/classnames": "^2.3.1",
-    "@types/graphql": "^14.5.0",
-    "@types/highlight.js": "^10.1.0",
+    "@types/date-fns": "^2.6.0",
    "@types/postcss-import": "^12.0.0",
-    "@types/postcss-nested": "^4.2.3",
-    "@types/ramda": "^0.27.40",
    "@types/react": "^17.0.4",
    "@types/tailwindcss": "^2.0.2",
    "autoprefixer": "^10.2.5",
--- a/pages/articles/[id].tsx
+++ b/pages/articles/[id].tsx
@ -4,7 +4,8 @@ import { GetServerSideProps } from "next";
 import { addApolloState, initializeApollo } from "../../commons/graphql/client";
 import { ARTICLE } from "../../commons/graphql/queries";
 import { Article } from "../../commons/graphql/generated";
-
+import { format, formatRelative } from "date-fns";
+import { zhCN } from "date-fns/locale";
 interface Props {
  article: Article;
 }
@ -13,12 +14,20 @@ const ArticleDetails: FC<Props> = ({ article }) => {
  // const { data } = useQuery<{ article: Article }>(ARTICLE, {
  //   variables: router.query,
  // });
+
  return (
    <main className={styles.articleDetails}>
      <article className={styles.article}>
        <header>
          <h1>{article.title}</h1>
-          <time>{article.publishedAt}</time>
+          <div className={styles.headerInfo}>
+            <address>作者 Ivan Li，发布于 </address>
+            <time>
+              {formatRelative(article.publishedAt, new Date(), {
+                locale: zhCN,
+              })}
+            </time>
+          </div>
        </header>
        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
        <footer>
--- a/pages/articles/article.module.css
+++ b/pages/articles/article.module.css
@ -9,18 +9,12 @@
  & > header {
    @apply my-8 mx-4;
    h1 {
-      @apply text-4xl font-medium;
+      @apply text-4xl font-medium mb-4;

      :global(.dark) & {
        @apply text-gray-200;
      }
    }
-    time {
-      @apply text-sm text-gray-500;
-      :global(.dark) & {
-        @apply text-gray-400;
-      }
-    }
  }
  & > div {
    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
@ -364,7 +358,16 @@
    }
  }
 }
-
+.headerInfo {
+  @apply text-sm text-gray-500 pl-2;
+  :global(.dark) & {
+    @apply text-gray-400;
+  }
+  
+  address, time {
+    @apply inline not-italic;
+  }
+}
 .articleEnd {
  @apply text-center text-gray-400 text-sm my-6;