Feature apollo client upgrade (#413)

* upgrade apollo client to 3.x * add apollo as a dev dependency * remove daily related features * migrate apollo client to use v3 and react hooks (for article-fetcher) * fix issues regarding to comments on #413 * bump antd version * rename hook name * update #413 * update import Helmet * fix relative path * update redux * fix koa router wildcard issue * update #413 * fix webpack and graphql compatibility issue * fix IFFE and qury operation name * fix tests * fix build * clean up * fix tests * clean up icons * update Co-authored-by: Anonymous <anonymous@test.com>
puncsky · Nov 19, 2020 · bf1cf60 · bf1cf60
1 parent 9ee8267
commit bf1cf60
Show file tree

Hide file tree

Showing 75 changed files with 1,212 additions and 1,538 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,10 +1,10 @@
 {
-    "extends": [
-      "@puncsky/eslint-config-onefx-react",
-      "@puncsky/eslint-config-onefx"
-    ],
-    "rules": {
-      "import/no-extraneous-dependencies": ["warn", {"devDependencies": false, "optionalDependencies": false, "peerDependencies": false}]
-    },
-    "ignorePatterns": ["src/client/static/*", "src/client/static/**/*", "src/shared/common/google-analytics.js"]
-  }
+  "extends": [
+    "@puncsky/eslint-config-onefx",
+    "@puncsky/eslint-config-onefx-react"
+  ],
+  "ignorePatterns": ["src/client/static/**/*"],
+  "rules": {
+    "import/no-extraneous-dependencies": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -53,3 +53,5 @@ dump.rdb
 .vscode/
 
 package-lock.json
+
+__generated__
diff --git a/apollo.config.js b/apollo.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  client: {
+    localSchemaFile: "src/api-gateway/api-gateway.graphql",
+    includes: ["src/shared/**/*.{ts,tsx,js,jsx,graphql}"]
+  }
+};
diff --git a/ava.config.js b/ava.config.js
@@ -1,12 +1,6 @@
 export default {
-  require: [
-    'ts-node/register',
-  ],
-  files: [
-    'src/**/*.test.ts',
-  ],
+  require: ["tsconfig-paths/register", "ts-node/register"],
+  files: ["src/**/*.test.ts"],
   compileEnhancements: false,
-  extensions: [
-    'ts',
-  ],
+  extensions: ["ts"]
 };
diff --git a/config/production.js b/config/production.js
@@ -1,5 +1,6 @@
 module.exports = {
   server: {
+    cdnBase: "https://touchbase.ai/",
     proxy: true,
     cookie: {
       secrets: JSON.parse(

diff --git a/package.json b/package.json
@@ -6,29 +6,21 @@
   "scripts": {
     "start": "ts-node --transpile-only ./server.ts",
     "test": "npm run lint && npm run cover",
-    "tsc": "NODE_ENV=test tsc",
+    "tsc": "cross-env NODE_ENV=test tsc",
     "check-coverage": "nyc check-coverage --lines 65 --functions 60 --Statements 65",
-    "ava": "NODE_ENV=test ava",
+    "ava": "cross-env NODE_ENV=test ava",
     "watch": "gulp watch",
     "build": "gulp build",
-    "build-production": "NODE_ENV=production gulp build",
-    "build-static-html": "NODE_ENV=production ts-node ./src/server/generate-static-html.ts",
+    "build-production": "cross-env NODE_ENV=production gulp build",
+    "build-static-html": "cross-env NODE_ENV=production ts-node ./src/server/generate-static-html.ts",
     "lint": "git add . && pretty-quick --staged && eslint src --fix --ext .js,.tsx,.ts --quiet",
-    "postinstall": "npm run bp && npm run doc",
-    "cover": "NODE_ENV=test tsc && nyc npm run ava",
+    "postinstall": "npm run schema:generate",
+    "cover": "cross-env NODE_ENV=test tsc && nyc npm run ava",
     "size": "ls -lh dist/",
     "bp": "npm run build-production && npm run size",
     "kill": "lsof -n -i4TCP:4103 | grep LISTEN | awk '{ print $2 }' | xargs kill",
-    "doc": "graphdoc --config ./package.json --force",
-    "format-i18n": "onefx-format-translations translations"
-  },
-  "graphdoc": {
-    "ga": "UA-XXXXXXXX",
-    "graphiql": "/api-gateway/",
-    "logo": "<a href=\"/\" target=\"_blank\" style=\"display:block;padding:1rem 3rem\"><img src=\"/favicon.png\" /></a>",
-    "schemaFile": "./src/api-gateway/api-gateway.graphql",
-    "output": "./dist/doc/api-gateway/",
-    "baseUrl": "./"
+    "format-i18n": "onefx-format-translations translations",
+    "schema:generate": "apollo client:codegen --no-addTypename --target=typescript --localSchemaFile=src/api-gateway/api-gateway.graphql"
   },
   "husky": {
     "hooks": {
@@ -69,14 +61,23 @@
   },
   "homepage": "https://github.com/puncsky/template_website#readme",
   "devDependencies": {
-    "@2fd/graphdoc": "2.4.0",
     "@types/graphql": "14.5.0",
     "@types/highlight.js": "9.12.3",
     "@types/markdown-it": "0.0.9",
+    "@typescript-eslint/eslint-plugin": "4.1.0",
+    "@typescript-eslint/parser": "4.1.0",
+    "apollo": "^2.31.1",
     "ava": "2.4.0",
     "awesome-typescript-loader": "5.2.1",
     "cache-loader": "2.0.1",
+    "cross-env": "^7.0.2",
     "del": "5.1.0",
+    "eslint": "7.9.0",
+    "eslint-config-airbnb-base": "14.2.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-import": "2.22.0",
+    "@puncsky/eslint-config-onefx": "2.5.0",
+    "@puncsky/eslint-config-onefx-react": "2.5.0",
     "fancy-log": "1.3.3",
     "glob": "7.1.6",
     "gulp": "4.0.2",
@@ -92,10 +93,6 @@
     "source-map-loader": "0.2.4",
     "sw-precache-webpack-plugin": "0.11.5",
     "terser-webpack-plugin": "2.3.5",
-    "tslint": "5.20.1",
-    "tslint-config-prettier": "1.18.0",
-    "tslint-microsoft-contrib": "6.2.0",
-    "tslint-require-connnect-typing": "1.0.1",
     "webpack": "4.42.0",
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-cli": "3.3.11",
@@ -104,6 +101,7 @@
   "dependencies": {
     "@ag-grid-community/all-modules": "22.1.1",
     "@ag-grid-community/react": "22.1.2",
+    "@apollo/client": "^3.2.5",
     "@axetroy/react-github-calendar": "2.0.0",
     "@babel/cli": "7.8.4",
     "@babel/core": "7.9.0",
@@ -121,6 +119,7 @@
     "@types/config": "0.0.36",
     "@types/dateformat": "3.0.1",
     "@types/dotenv": "6.1.1",
+    "@types/dottie": "^2.0.3",
     "@types/form-serialize": "0.7.1",
     "@types/graphql-iso-date": "3.3.3",
     "@types/jsonwebtoken": "8.3.8",
@@ -133,16 +132,13 @@
     "@types/react-helmet": "5.0.15",
     "@types/react-outside-click-handler": "1.3.0",
     "@types/react-redux": "7.1.4",
-    "@types/react-router": "4.4.5",
-    "@types/react-router-dom": "4.3.5",
+    "@types/react-router": "^5.1.8",
+    "@types/react-router-dom": "^5.1.6",
     "@types/styletron-react": "5.0.2",
     "@types/uuid": "3.4.8",
     "@types/validator": "10.11.3",
     "@types/web-push": "^3.3.0",
     "antd": "^4.8.0",
-    "apollo-cache-inmemory": "1.6.5",
-    "apollo-client": "2.6.8",
-    "apollo-link-http": "1.5.16",
     "apollo-server-koa": "2.16.0",
     "axios": "0.19.2",
     "babel-loader": "8.1.0",
@@ -179,22 +175,26 @@
     "nodemailer": "5.1.1",
     "nodemailer-mailgun-transport": "1.4.0",
     "omit-deep-lodash": "1.1.4",
-    "onefx": "1.8.5",
+    "onefx": "^2.6.0",
     "process": "0.11.10",
-    "react-apollo": "2.5.8",
+    "react": "^17.0.1",
     "react-calendar-heatmap": "1.8.1",
     "react-dom": "16.13.1",
+    "react-helmet": "^6.1.0",
     "react-outside-click-handler": "1.3.0",
-    "react-redux": "5.1.2",
-    "react-router": "4.3.1",
-    "react-router-dom": "4.3.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-seo-meta-tags": "1.1.0",
     "react-tooltip": "3.11.6",
-    "redux": "4.0.5",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "reflect-metadata": "0.1.13",
     "rrule": "^2.6.4",
     "safe-json-globals": "2.1.0",
     "shader": "1.0.0",
+    "styletron-engine-atomic": "^1.4.6",
+    "styletron-react": "^5.2.7",
     "ts-node": "8.6.2",
     "type-graphql": "0.17.6",
     "typescript": "4.0.3",

diff --git a/server.ts b/server.ts
@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 import { startServer } from "./src/server";
+
 startServer();
diff --git a/src/client/javascripts/main.tsx b/src/client/javascripts/main.tsx
@@ -1,8 +1,8 @@
 import { clientReactRender } from "onefx/lib/iso-react-render/client-react-render";
 import { noopReducer } from "onefx/lib/iso-react-render/root/root-reducer";
 import React from "react";
-import { ApolloProvider } from "react-apollo";
-import { combineReducers } from "redux";
+import { ApolloProvider } from "@apollo/client";
+import { combineReducers, Reducer } from "redux";
 import { AppContainer } from "../../shared/app-container";
 import { apolloClient } from "../../shared/common/apollo-client";
 import {
@@ -17,7 +17,7 @@ clientReactRender({
       <AppContainer />
     </ApolloProvider>
   ),
-  reducer: combineReducers({
+  reducer: combineReducers<Reducer>({
     base: noopReducer,
     human: humanReducer,
     humans: humansReducer,

diff --git a/src/client/javascripts/profile-main.ts b/src/client/javascripts/profile-main.ts
diff --git a/src/server/server-routes.tsx b/src/server/server-routes.tsx
@@ -18,7 +18,7 @@ export function setServerRoutes(server: MyServer): void {
     ctx.body = "OK";
   });
 
-  server.get("legal", "/page/*", async (ctx: MyContext) => {
+  server.get("legal", "/page/:page*", async (ctx: MyContext) => {
     ctx.body = await apolloSSR(ctx, "", {
       VDom: <AppContainer />,
       reducer: noopReducer,

diff --git a/src/shared/app.tsx b/src/shared/app.tsx
@@ -1,4 +1,4 @@
-import { ConfigProvider } from "antd";
+import ConfigProvider from "antd/lib/config-provider";
 import enUS from "antd/lib/locale/en_US";
 import zhCN from "antd/lib/locale/zh_CN";
 import { styled } from "onefx/lib/styletron-react";
@@ -19,8 +19,6 @@ import { TopBar } from "./common/top-bar";
 import { ContactDetailContainer } from "./contact/contact-detail";
 import { ProfileCreatorContainer } from "./contact/profile-creator";
 import { ContactsTableContainer } from "./contacts/contacts-table";
-import { Daily } from "./daily/daily";
-import { DailyItem } from "./daily/daily-item";
 import { Home } from "./home/home";
 import { NoteFetcher } from "./note/note-fetcher";
 import { Onboard } from "./onboard";
@@ -48,8 +46,6 @@ export class App extends Component<Props> {
           <div style={FOOTER_ABOVE}>
             <ScrollToTop>
               <Switch>
-                <Route exact path="/ribao" component={Daily} />
-                <Route exact path="/ribao/:id" component={DailyItem} />
                 <Route exact path="/page/:id+" component={ArticleFetcher} />
                 <Route
                   exact

diff --git a/src/shared/article/article-fetcher.tsx b/src/shared/article/article-fetcher.tsx
@@ -1,53 +1,33 @@
-import gql from "graphql-tag";
 import React from "react";
-import { Query, QueryResult } from "react-apollo";
 import { RouteComponentProps, withRouter } from "react-router";
 import { CommonMargin } from "../common/common-margin";
 import { NotFound } from "../common/not-found";
 import { Preloader } from "../common/preloader";
 import { Article } from "./article";
-import { ArticleResponse } from "./article-types";
-
-const FETCH_ARTICLE = gql`
-  query articles($id: String!) {
-    articles(id: $id) {
-      title
-      contentHTML
-    }
-  }
-`;
+import { useGetArticles } from "./hooks/useGetArticles";
 
 export function ArticleFetcherInner(
   props: RouteComponentProps<{ id: string }>
 ): JSX.Element {
+  const { loading, error, data } = useGetArticles({
+    id: props.match.params.id
+  });
+  if (loading) {
+    return <Preloader />;
+  }
+  if (error || !data || !data.articles) {
+    return <NotFound />;
+  }
   return (
-    <Query query={FETCH_ARTICLE} variables={{ id: props.match.params.id }}>
-      {({
-        loading,
-        error,
-        data
-      }: QueryResult<{ articles: Array<ArticleResponse> }>) => {
-        if (loading) {
-          return <Preloader />;
-        }
-
-        if (error || !data || !data.articles) {
-          return <NotFound />;
-        }
-
-        return (
-          <>
-            <CommonMargin />
-            {/*
-            // @ts-ignore */}
-            <Article
-              title={data.articles[0].title}
-              contentHTML={data.articles[0].contentHTML}
-            />
-          </>
-        );
-      }}
-    </Query>
+    <>
+      <CommonMargin />
+      {/*
+      // @ts-ignore */}
+      <Article
+        title={data.articles[0].title}
+        contentHTML={data.articles[0].contentHTML}
+      />
+    </>
   );
 }
 

diff --git a/src/shared/article/article-service.ts b/src/shared/article/article-service.ts
@@ -1,4 +1,3 @@
-// @flow
 import {
   ArticleMeta,
   loadDir,

diff --git a/src/shared/article/article.tsx b/src/shared/article/article.tsx
@@ -6,7 +6,7 @@ import loadScript from "load-script";
 // @ts-ignore
 import { t } from "onefx/lib/iso-i18n";
 // @ts-ignore
-import Helmet from "onefx/lib/react-helmet";
+import { Helmet } from "onefx/lib/react-helmet";
 // @ts-ignore
 import { styled } from "onefx/lib/styletron-react";
 import React, { PureComponent } from "react";

diff --git a/src/shared/article/data/queries.ts b/src/shared/article/data/queries.ts
@@ -0,0 +1,10 @@
+import gql from "graphql-tag";
+
+export const getArticles = gql`
+  query GetArticles($id: String!) {
+    articles(id: $id) {
+      title
+      contentHTML
+    }
+  }
+`;
diff --git a/src/shared/article/hooks/useGetArticles.ts b/src/shared/article/hooks/useGetArticles.ts
@@ -0,0 +1,23 @@
+import { useQuery, ApolloError } from "@apollo/client";
+import {
+  GetArticles,
+  GetArticlesVariables
+} from "../data/__generated__/GetArticles";
+import { getArticles } from "../data/queries";
+
+export const useGetArticles = (
+  variables?: GetArticlesVariables
+): {
+  loading: boolean;
+  error?: ApolloError;
+  data?: GetArticles;
+} => {
+  const { loading, error, data } = useQuery<GetArticles, GetArticlesVariables>(
+    getArticles,
+    {
+      ssr: false,
+      variables
+    }
+  );
+  return { loading, error, data };
+};
diff --git a/src/shared/common/apollo-client-adapter.ts b/src/shared/common/apollo-client-adapter.ts
@@ -1,4 +1,4 @@
-import { Operation } from "apollo-link";
+import { Operation } from "@apollo/client";
 import { decryptECIES, encryptECIES } from "blockstack/lib/encryption";
 import dottie from "dottie";
 import { createHmacs } from "./get-hmac";