Merge pull request #7 from oslabs-beta/ian/feature/working-with-react17

Ian/feature/working with react17

Author: mdunnmon

app/electron/main.js

@@ -20,10 +20,10 @@ const {
 const { resolve } = require('app-root-path');
 
 // to install react dev tool extension
-const {
-  default: installExtension,
-  REACT_DEVELOPER_TOOLS
-} = require('electron-devtools-installer');
+// const {
+//   default: installExtension,
+//   REACT_DEVELOPER_TOOLS
+// } = require('electron-devtools-installer');
 const debug = require('electron-debug');
 
 // import custom protocol in protocol.js

package.json

@@ -67,7 +67,7 @@
   "scripts": {
     "postinstall": "set ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true electron-builder install-app-deps",
     "dev-server": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js",
-    "dev": "concurrently -k \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development nodemon server/server.js --open\"",
+    "dev": "concurrently -k \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development nodemon server/server.mjs --open\"",
     "electron-dev": "cross-env NODE_ENV=development electron .",
     "prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
     "prod": "npm run prod-build && electron . --no-sandbox",
@@ -126,28 +126,27 @@
   },
   "homepage": "https://github.com/open-source-labs/ReacType#readme",
   "dependencies": {
-    "@apollo/client": "^3.6.9",
-    "@apollo/federation": "^0.28.0",
+    "@apollo/client": "^3.7.10",
+    "@apollo/federation": "^0.38.1",
+    "@apollo/server": "^4.4.1",
     "@babel/cli": "^7.18.10",
     "@babel/register": "^7.18.9",
+    "@graphql-tools/schema": "^9.0.17",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.93",
     "@mui/styles": "^5.11.12",
-    "@nestjs/graphql": "^10.0.21",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.6.3",
     "@types/prettier": "^2.6.4",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "ace-builds": "^1.8.1",
-    "apollo-server": "^2.0.0",
-    "apollo-server-core": "^3.12.0",
-    "apollo-server-express": "^3.12.0",
     "app-root-path": "^3.0.0",
     "autoprefixer": "^10.4.8",
     "babel-polyfill": "^6.26.0",
     "bcryptjs": "^2.4.3",
+    "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "d3": "^7.6.1",
@@ -157,11 +156,9 @@
     "electron-window-manager": "^1.0.6",
     "esbuild-wasm": "^0.14.51",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "express-graphql": "^0.12.0",
     "fs": "^0.0.1-security",
-    "graphql": "^15.8.0",
+    "graphql": "^16.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "immutable": "^4.1.0",
     "js-cookie": "^3.0.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -204,7 +201,7 @@
     "@types/jest": "^28.1.6",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
-    "apollo": "^2.11.1",
+    "apollo": "^2.34.0",
     "axios": "^0.27.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
@@ -254,7 +251,7 @@
     "webpack-merge": "^4.2.2"
   },
   "engines": {
-    "node": "18.x",
-    "npm": "8.19.2"
+    "node": "19.x",
+    "npm": "9.5.0"
   }
 }

server/graphQL/resolvers/mutation.js

@@ -1,5 +1,11 @@
-const { UserInputError } = require('apollo-server-express');
+// const { ApolloServerErrorCode.BAD_USER_INPUT } = require('apollo-server-express');
+
+// import { ApolloServerErrorCode } from '@apollo/server/errors';// v4 syntax
+const ApolloServerErrorCode = require('@apollo/server/errors');
+//now using ApolloServerErrorCode.BAD_USER_INPUT in place of ApolloServerErrorCode.BAD_USER_INPUT
+
 const { Projects, Users, Comments } = require('../../models/reactypeModels');
+
 /*
 * resolvers are functions that handles graphQL requests. This file defines the logic for graphQL mutation requests
 * Link to Apollo Mutations:
@@ -23,7 +29,7 @@ const Project = {
       });
     }
 
-    throw new UserInputError('Project is not found. Please try another project ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Project is not found. Please try another project ID', {
       argumentName: 'projId',
     });
   },
@@ -33,7 +39,7 @@ const Project = {
     const target = await Projects.findOne(filter);
 
     if (!target) {
-      throw new UserInputError('Project is not found. Please try another project ID', {
+      throw new ApolloServerErrorCode.BAD_USER_INPUT('Project is not found. Please try another project ID', {
         argumentName: 'projId',
       });
     }
@@ -63,10 +69,10 @@ const Project = {
         });
       }
 
-      throw new UserInputError('Internal Server Error');
+      throw new ApolloServerErrorCode.BAD_USER_INPUT('Internal Server Error');
     }
 
-    throw new UserInputError('User is not found. Please try another user ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('User is not found. Please try another user ID', {
       argumentName: 'userId',
     });
   },
@@ -87,7 +93,7 @@ const Project = {
       });
     }
 
-    throw new UserInputError('Project is not found. Please try another project ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Project is not found. Please try another project ID', {
       argumentName: 'projId',
     });
   },
@@ -109,7 +115,7 @@ const Project = {
       });
     }
 
-    throw new UserInputError('Project is not found. Please try another project ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Project is not found. Please try another project ID', {
       argumentName: 'projId',
     });
   },
@@ -145,7 +151,7 @@ const Project = {
       });
     }
 
-    throw new UserInputError('Project cannot be found. Please try another project ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Project cannot be found. Please try another project ID', {
       argumentName: 'projId',
     });
   },

server/graphQL/resolvers/query.js

@@ -1,4 +1,9 @@
-const { UserInputError } = require('apollo-server-express');
+// const { UserInputError } = require('apollo-server-express');//v3 syntax
+
+// import { ApolloServerErrorCode } from '@apollo/server/errors';// v4 syntax
+const ApolloServerErrorCode = require('@apollo/server/errors')
+//now using ApolloServerErrorCode.BAD_USER_INPUT in place of UserInputError
+
 const { Projects, Comments } = require('../../models/reactypeModels');
 // Link to Apollo Query Types:
 // https://www.apollographql.com/docs/apollo-server/data/resolvers/#defining-a-resolver
@@ -20,7 +25,7 @@ const Project = {
     }
 
     // resp is null if nothing is found based on the project ID
-    throw new UserInputError('Project is not found. Please try another project ID', {
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Project is not found. Please try another project ID', {
       argumentName: 'projId',
     });
   },
@@ -32,7 +37,7 @@ const Project = {
       resp = resp.filter(proj => proj.userId == userId);
       // if resp = [] after the filtering, this means the userId doesnt exisit in the database, throw error as follow
       if (resp.length === 0) {
-        throw new UserInputError(`Project for userId: "${userId}". Please try another id`, {
+        throw new ApolloServerErrorCode.BAD_USER_INPUT(`Project for userId: "${userId}". Please try another id`, {
           argumentName: 'userId',
         });
       }
@@ -53,7 +58,7 @@ const Project = {
       }));
     }
     // resp is null, return error message
-    throw new UserInputError('Internal Server Error');
+    throw new ApolloServerErrorCode.BAD_USER_INPUT('Internal Server Error');
   },
 };
 

server/graphQL/schema/typeDefs.js

@@ -1,4 +1,5 @@
-const { gql } = require('apollo-server-express');
+// const { gql } = require('apollo-server-express');
+const { gql } = require('@apollo/client');
 
 // Link to defining a schema in Apollo:
 // https://www.apollographql.com/docs/apollo-server/schema/schema/

server/server.js renamed to server/server.mjs

@@ -1,16 +1,39 @@
-const { ApolloServer } = require('apollo-server-express');
-const express = require('express');
-const cookieParser = require('cookie-parser');
+// const { ApolloServer } = require('@apollo/server');//changed for v4
+import { ApolloServer } from '@apollo/server';
+
+//v4 Apollo imports
+import { expressMiddleware } from '@apollo/server/express4';
+import cors from 'cors';
+import bodyParser from 'body-parser';
+const {json, urlencoded} = bodyParser;
+
+//possibly redundant
+// const {makeExecutableSchema} = require('@graphql-tools/schema');
+import { makeExecutableSchema } from '@graphql-tools/schema';
+
+// const express = require('express');
+// const cookieParser = require('cookie-parser');
+import express from 'express';
+import cookieParser from 'cookie-parser';
+
 //const passport = require('passport');
 //const GitHubStrategy = require('passport-github2').Strategy;
-const { DEV_PORT } = require('../config');
 
-const path = require('path');
-const cors = require('cors');
-const userController = require('./controllers/userController');
-const cookieController = require('./controllers/cookieController');
-const sessionController = require('./controllers/sessionController');
-const projectController = require('./controllers/projectController');
+// const { DEV_PORT } = require('../config');
+import DEV_PORT from '../config.js';
+
+// const path = require('path');
+import path from 'path';
+
+// const userController = require('./controllers/userController');
+// const cookieController = require('./controllers/cookieController');
+// const sessionController = require('./controllers/sessionController');
+// const projectController = require('./controllers/projectController');
+
+import userController from './controllers/userController.js';
+import cookieController from './controllers/cookieController.js';
+import sessionController from './controllers/sessionController.js';
+import projectController from './controllers/projectController.js';
 
 const app = express();
 
@@ -24,7 +47,8 @@ app.use(express.urlencoded({ limit: '100mb', extended: true }));
 app.use(cookieParser());
 
 // Routes
-const stylesRouter = require('./routers/stylesRouter');
+// const stylesRouter = require('./routers/stylesRouter');
+import stylesRouter from './routers/stylesRouter.js';
 
 // enable cors
 // options: origin: allows from localhost when in dev or the app://rse when using prod, credentials: allows credentials header from origin (needed to send cookies)
@@ -102,9 +126,14 @@ GraphQl Router
 /* ******************************************************************* */
 
 // Query resolvers
-const Query = require('./graphQL/resolvers/query');
+// const Query = require('./graphQL/resolvers/query');
+import Query from './graphQL/resolvers/query.js';
+// const {Query} = query;
+
 // Mutation resolvers
-const Mutation = require('./graphQL/resolvers/mutation');
+// const Mutation = require('./graphQL/resolvers/mutation');
+import Mutation from './graphQL/resolvers/mutation.js';
+// const {Mutation} = mutation;
 
 // package resolvers into one variable to pass to Apollo Server
 const resolvers = {
@@ -121,16 +150,34 @@ const resolvers = {
 app.use('/user-styles', stylesRouter);
 
 // schemas used for graphQL
-const typeDefs = require('./graphQL/schema/typeDefs.js');
-const { dirname } = require('node:path');
+
+// const typeDefs = require('./graphQL/schema/typeDefs.js');
+import typeDefs from './graphQL/schema/typeDefs.js';
+
+// const { dirname } = require('node:path');
 
 // instantiate Apollo server and attach to Express server, mounted at 'http://localhost:PORT/graphql'
 
-const server = new ApolloServer({ typeDefs, resolvers });
-(async function() {
-  await server.start()
-  server.applyMiddleware({ app, path: '/graphql' });
-}());
+//use make exacutable schema to allow schema to be passed to new server
+const schema = makeExecutableSchema({typeDefs, resolvers});
+
+const server = new ApolloServer({schema});
+//V3 syntax
+// (async function() {
+//   await server.start()
+//   server.applyMiddleware({ app, path: '/graphql' });
+// }());
+
+//v4 syntax
+await server.start()
+app.use(
+  '/graphql',
+  cors(),
+  json(),
+  expressMiddleware(server, {
+    context: async ({ req }) => ({ token: req.headers.token }),
+  }),
+);
 
 /** ****************************************************************** */
 
@@ -204,6 +251,7 @@ app.use((err, req, res, next) => {
 
 // starts server on PORT
 if (isDev || isProd) {
-  app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
+  app.listen(PORT.DEV_PORT, () => console.log(`Server listening on port: ${PORT.DEV_PORT}`));
 }
 if (isTest) module.exports = app;
+// export default app;