diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..67fcd9c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "superjson" + ] +} \ No newline at end of file diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..16a5c11 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,4 @@ +module.exports = { + presets: ["next/babel"], + plugins: ["superjson-next"], +}; diff --git a/codegen.yml b/codegen.yml index dfbd72c..e204562 100644 --- 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" diff --git a/commons/graphql/client.ts b/commons/graphql/client.ts index c09a60a..2945669 100644 --- 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; 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; diff --git a/graphql.schema.json b/commons/graphql/graphql.schema.json similarity index 100% rename from graphql.schema.json rename to commons/graphql/graphql.schema.json diff --git a/package-lock.json b/package-lock.json index 57baa6a..678cf32 100644 --- 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" + } } } } diff --git a/package.json b/package.json index 0fb699d..7d95ef2 100644 --- 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", diff --git a/pages/articles/[id].tsx b/pages/articles/[id].tsx index 5b7abdd..80c9568 100644 --- 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 = ({ article }) => { // const { data } = useQuery<{ article: Article }>(ARTICLE, { // variables: router.query, // }); + return (

{article.title}

- +
+
作者 Ivan Li，发布于
+ +