Merge pull request #787 from ideafast/chore/update-apollo

feat: Upgrade to Apollo GraphQL v3.x stack

package.json

@@ -38,7 +38,6 @@
         "@babel/eslint-parser": "7.16.5",
         "@babel/eslint-plugin": "7.16.5",
         "@types/jest": "27.4.0",
-        "eslint": "8.7.0",
         "eslint-config-react-app": "7.0.0",
         "eslint-plugin-cypress": "2.12.1",
         "eslint-plugin-flowtype": "8.0.3",
@@ -55,9 +54,7 @@
         "webpack-cli": "4.9.2"
     },
     "resolutions": {
-        "**/apollo-server-core": "2.20.0",
         "**/graphql-upload": "^11.0.0",
-        "**/@types/eslint": "8.4.0",
         "**/mongodb": "4.3.1"
     },
     "eslintConfig": {

packages/itmat-commons/package.json

@@ -20,7 +20,7 @@
         "prepublishOnly": "yarn run build"
     },
     "dependencies": {
-        "graphql": "15.5.0",
+        "graphql": "16.3.0",
         "graphql-tag": "2.12.6",
         "minio": "7.0.26"
     },

packages/itmat-commons/src/graphql/files.ts

@@ -9,6 +9,7 @@ export const UPLOAD_FILE = gql`
             projectId
             fileSize
             description
+            uploadTime
             uploadedBy
             hash
         }

packages/itmat-interface/package.json

@@ -20,16 +20,19 @@
         "prepublishOnly": "yarn run build"
     },
     "dependencies": {
-        "apollo-server-express": "2.20.0",
+        "apollo-server-express": "3.6.2",
         "bcrypt": "5.0.1",
         "body-parser": "1.19.1",
         "connect-mongo": "4.6.0",
         "deepmerge": "4.2.2",
         "express": "4.17.2",
         "express-session": "1.17.2",
         "fs-extra": "10.0.0",
+        "graphql": "16.3.0",
         "graphql-scalars": "1.14.1",
         "graphql-type-json": "0.3.2",
+        "graphql-subscriptions": "2.0.0",
+        "graphql-upload": "13.0.0",
         "hi-base32": "0.5.1",
         "itmat-commons": "1.0.0",
         "jwt-decode": "^3.1.2",
@@ -38,6 +41,7 @@
         "passport": "0.5.2",
         "passport-local": "1.0.0",
         "saslprep": "1.0.3",
+        "subscriptions-transport-ws": "0.11.0",
         "uuid": "8.3.2"
     },
     "devDependencies": {
@@ -59,7 +63,6 @@
         "cross-env": "7.0.3",
         "cross-spawn": "7.0.3",
         "get-port": "6.0.0",
-        "graphql": "15.5.0",
         "itmat-setup": "1.0.0",
         "jest": "27.4.7",
         "jsonwebtoken": "8.5.1",
@@ -73,7 +76,6 @@
         "typescript": "4.3.2"
     },
     "resolutions": {
-        "**/apollo-server-core": "2.20.0",
         "**/graphql-upload": "^11.0.0",
         "**/mongodb": "4.3.1"
     },

packages/itmat-interface/src/graphql/pubsub.ts

@@ -1,4 +1,4 @@
-import { PubSub } from 'apollo-server-express';
+import { PubSub } from 'graphql-subscriptions';
 
 export const pubsub = new PubSub();
 

packages/itmat-interface/src/graphql/resolvers/jobResolvers.ts

@@ -1,4 +1,5 @@
-import { ApolloError, withFilter } from 'apollo-server-express';
+import { ApolloError } from 'apollo-server-express';
+import { withFilter } from 'graphql-subscriptions';
 import { Models, task_required_permissions } from 'itmat-commons';
 import { v4 as uuid } from 'uuid';
 import { db } from '../../database/database';

packages/itmat-interface/src/graphql/schema.ts → packages/itmat-interface/src/graphql/typeDefs.ts

@@ -1,8 +1,9 @@
 import { gql } from 'apollo-server-express';
 
-export const schema = gql`
+export const typeDefs = gql`
 scalar JSON
 scalar BigInt
+scalar Upload
 
 enum USERTYPE {
     ADMIN

packages/itmat-interface/src/server/router.ts

@@ -1,4 +1,9 @@
 import { ApolloServer, UserInputError } from 'apollo-server-express';
+import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
+import { GraphQLUpload, graphqlUploadExpress } from 'graphql-upload';
+import { execute, subscribe } from 'graphql';
+import { SubscriptionServer } from 'subscriptions-transport-ws';
+import { makeExecutableSchema } from '@graphql-tools/schema';
 import bodyParser from 'body-parser';
 // import connectMongo from 'connect-mongo';
 import cors from 'cors';
@@ -9,7 +14,7 @@ import http from 'http';
 import passport from 'passport';
 // import { db } from '../database/database';
 import { resolvers } from '../graphql/resolvers';
-import { schema } from '../graphql/schema';
+import { typeDefs } from '../graphql/typeDefs';
 import { fileDownloadController } from '../rest/fileDownload';
 import { userLoginUtils } from '../utils/userLoginUtils';
 import { IConfiguration } from '../utils/configManager';
@@ -35,8 +40,8 @@ export class Router {
 
 
         /* save persistent sessions in mongo */
-        this.app.use (
-            session ({
+        this.app.use(
+            session({
                 secret: config.sessionsSecret,
                 saveUninitialized: false,
                 resave: true,
@@ -54,33 +59,47 @@ export class Router {
         passport.serializeUser(userLoginUtils.serialiseUser);
         passport.deserializeUser(userLoginUtils.deserialiseUser);
 
+        this.server = http.createServer(this.app);
+
+        /* putting schema together */
+        const schema = makeExecutableSchema({
+            typeDefs, resolvers: {
+                ...resolvers,
+                BigInt: scalarResolvers,
+                // This maps the `Upload` scalar to the implementation provided
+                // by the `graphql-upload` package.
+                Upload: GraphQLUpload
+            }
+        });
+
         /* register apolloserver for graphql requests */
         const gqlServer = new ApolloServer({
-            typeDefs: schema,
-            resolvers: {
-                ...resolvers,
-                BigInt: scalarResolvers
-            },
+            schema,
+            allowBatchedHttpRequests: true,
             plugins: [
                 {
-                    serverWillStart() {
+                    async serverWillStart() {
                         logPlugin.serverWillStartLogPlugin();
-                    }
-                },
-                {
-                    requestDidStart() {
                         return {
-                            executionDidStart(requestContext) {
+                            async drainServer() {
+                                subscriptionServer.close();
+                            }
+                        };
+                    },
+                    async requestDidStart() {
+                        return {
+                            async executionDidStart(requestContext) {
                                 const operation = requestContext.operationName;
                                 const actionData = requestContext.request.variables;
                                 (requestContext as any).request.variables = spaceFixing(operation, actionData);
                             },
-                            willSendResponse(requestContext) {
+                            async willSendResponse(requestContext) {
                                 logPlugin.requestDidStartLogPlugin(requestContext);
                             }
                         };
                     },
-                }
+                },
+                ApolloServerPluginDrainHttpServer({ httpServer: this.server })
             ],
             context: async ({ req, res }) => {
                 /* Bounce all unauthenticated graphql requests */
@@ -95,7 +114,7 @@ export class Router {
                     const pubkey = decodedPayload.publicKey;
 
                     // verify the JWT
-                    jwt.verify(token, pubkey, function(err) {
+                    jwt.verify(token, pubkey, function (err) {
                         if (err) {
                             throw new UserInputError('JWT verification failed. ' + err);
                         }
@@ -114,12 +133,26 @@ export class Router {
             }
         });
 
-        gqlServer.applyMiddleware({ app: this.app, cors: { credentials: true } });
+        this.app.use(graphqlUploadExpress());
 
-        /* register the graphql subscription functionalities */
-        this.server = http.createServer(this.app);
-        gqlServer.installSubscriptionHandlers(this.server);
+        gqlServer.start().then(() => {
+            gqlServer.applyMiddleware({ app: this.app, cors: { credentials: true } });
+        });
 
+        /* register the graphql subscription functionalities */
+        const subscriptionServer = SubscriptionServer.create({
+            // This is the `schema` we just created.
+            schema,
+            // These are imported from `graphql`.
+            execute,
+            subscribe,
+        }, {
+            // This is the `httpServer` we created in a previous step.
+            server: this.server,
+            // Pass a different path here if your ApolloServer serves at
+            // a different path.
+            path: '/graphql',
+        });
 
         /* Bounce all unauthenticated non-graphql HTTP requests */
         // this.app.use((req: Request, res: Response, next: NextFunction) => {

packages/itmat-interface/test/serverTests/file.test.ts

@@ -190,7 +190,9 @@ if (global.hasMinio) {
                     const createdFile = await mongoClient.collection(config.database.collections.files_collection).findOne({ fileName: 'I7N3G6G-MMM7N3G6G-20200704-20200721.txt', studyId: createdStudy.id });
                     expect(res.status).toBe(200);
                     expect(res.body.errors).toBeUndefined();
-                    expect(res.body.data.uploadFile).toEqual({
+                    const { uploadTime, ...uploadFile } = res.body.data.uploadFile;
+                    expect(uploadTime).toBeDefined();
+                    expect(uploadFile).toEqual({
                         id: createdFile.id,
                         fileName: 'I7N3G6G-MMM7N3G6G-20200704-20200721.txt',
                         studyId: createdStudy.id,
@@ -222,7 +224,9 @@ if (global.hasMinio) {
                     const createdFile = await mongoClient.collection(config.database.collections.files_collection).findOne({ fileName: 'prolific_test.txt', studyId: createdStudyClinical.id });
                     expect(res.status).toBe(200);
                     expect(res.body.errors).toBeUndefined();
-                    expect(res.body.data.uploadFile).toEqual({
+                    const { uploadTime, ...uploadFile } = res.body.data.uploadFile;
+                    expect(uploadTime).toBeDefined();
+                    expect(uploadFile).toEqual({
                         id: createdFile.id,
                         fileName: 'prolific_test.txt',
                         studyId: createdStudyClinical.id,
@@ -254,7 +258,9 @@ if (global.hasMinio) {
                     const createdFile = await mongoClient.collection(config.database.collections.files_collection).findOne({ fileName: 'RandomFile.txt', studyId: createdStudyAny.id });
                     expect(res.status).toBe(200);
                     expect(res.body.errors).toBeUndefined();
-                    expect(res.body.data.uploadFile).toEqual({
+                    const { uploadTime, ...uploadFile } = res.body.data.uploadFile;
+                    expect(uploadTime).toBeDefined();
+                    expect(uploadFile).toEqual({
                         id: createdFile.id,
                         fileName: 'RandomFile.txt',
                         studyId: createdStudyAny.id,
@@ -308,7 +314,9 @@ if (global.hasMinio) {
                     const createdFile = await mongoClient.collection(config.database.collections.files_collection).findOne({ fileName: 'I7N3G6G-MMM7N3G6G-20200704-20200721.txt', studyId: createdStudy.id });
                     expect(res.status).toBe(200);
                     expect(res.body.errors).toBeUndefined();
-                    expect(res.body.data.uploadFile).toEqual({
+                    const { uploadTime, ...uploadFile } = res.body.data.uploadFile;
+                    expect(uploadTime).toBeDefined();
+                    expect(uploadFile).toEqual({
                         id: createdFile.id,
                         fileName: 'I7N3G6G-MMM7N3G6G-20200704-20200721.txt',
                         studyId: createdStudy.id,
@@ -340,7 +348,9 @@ if (global.hasMinio) {
                     const createdFile = await mongoClient.collection(config.database.collections.files_collection).findOne({ fileName: 'IR6R4AR-AX6VJH6F6-20200601-20200703.txt', studyId: createdStudy.id });
                     expect(res.status).toBe(200);
                     expect(res.body.errors).toBeUndefined();
-                    expect(res.body.data.uploadFile).toEqual({
+                    const { uploadTime, ...uploadFile } = res.body.data.uploadFile;
+                    expect(uploadTime).toBeDefined();
+                    expect(uploadFile).toEqual({
                         id: createdFile.id,
                         fileName: 'IR6R4AR-AX6VJH6F6-20200601-20200703.txt',
                         studyId: createdStudy.id,

packages/itmat-setup/package.json

@@ -23,7 +23,6 @@
     },
     "devDependencies": {
         "chalk": "4.1.2",
-        "eslint": "8.7.0",
         "typescript": "4.3.2"
     },
     "eslintConfig": {

packages/itmat-ui-react/package.json

@@ -22,9 +22,9 @@
         "@apollo/client": "3.5.8",
         "@ideafast/idgen": "0.1.1",
         "antd": "4.16.3",
-        "apollo-upload-client": "14.1.3",
+        "apollo-upload-client": "17.0.0",
         "axios": "0.25.0",
-        "graphql": "15.5.0",
+        "graphql": "16.3.0",
         "itmat-commons": "1.0.0",
         "qrcode": "1.5.0",
         "react": "17.0.2",

packages/itmat-ui-react/src/components/profilemnt/index.tsx → packages/itmat-ui-react/src/components/profile/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ProfileManagementSection } from './profilemnt';
-import css from './profilemnt.module.css';
+import { ProfileManagementSection } from './profile';
+import css from './profile.module.css';
 
 export const ProfilePage: React.FunctionComponent = () => {
     return (

packages/itmat-ui-react/src/components/scaffold/mainMenuBar.tsx

@@ -62,7 +62,7 @@ export const MainMenuBar: React.FunctionComponent<MainMenuBarProps> = ({ project
         */}
 
         <div>
-            <NavLink to='/profilemnt' title='My account' activeClassName={css.clickedButton}>
+            <NavLink to='/profile' title='My account' activeClassName={css.clickedButton}>
                 <div className={css.button}><SettingOutlined />My account</div>
             </NavLink>
         </div>

packages/itmat-ui-react/src/components/scaffold/mainPanel.tsx

@@ -6,7 +6,7 @@ import { ProjectDetailPage } from '../projectDetail';
 import { ProjectListPage } from '../projectList';
 import { UserPage } from '../users';
 import { LogPage } from '../log';
-import { ProfilePage } from '../profilemnt';
+import { ProfilePage } from '../profile';
 import css from './scaffold.module.css';
 
 export const MainPanel: React.FunctionComponent = () => {
@@ -19,7 +19,7 @@ export const MainPanel: React.FunctionComponent = () => {
                 <Route path='/datasets' render={() => <DatasetListPage />} />
                 <Route path='/users' render={() => <UserPage />} />
                 <Route path='/logs' render={() => <LogPage />} />
-                <Route path='/profilemnt' render={() => <ProfilePage />} />
+                <Route path='/profile' render={() => <ProfilePage />} />
                 <Route render={() => <Redirect to='/datasets' />} />
             </Switch>
         </div>

tsconfig.build.json

@@ -15,7 +15,9 @@
         "target": "es5",
         "sourceMap": true,
         "moduleResolution": "node",
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
+        "importHelpers": true,
+        "forceConsistentCasingInFileNames": true
     },
     "exclude": [
         "node_modules",