fix(deps): update apollo graphql packages to v3 (major) (#794)

* fix(deps): update apollo graphql packages to v3

* stash

* Change

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

.yarnrc.yml

@@ -19,20 +19,9 @@ packageExtensions:
     dependencies:
       '@types/react': '*'
       'react': '*'
-  'apollo-server-core@^2.25.2':
+  'apollo-server-core@^3.4.0':
     dependencies:
       '@types/node': '^14.17.15'
-  'apollo-server@^2.25.2':
-    dependencies:
-      '@types/express': '^4.17.13'
-      '@types/node': '^14.17.15'
-  'graphql-subscriptions@^1.0.0':
-    dependencies:
-      '@types/node': '^14.17.15'
-  'subscriptions-transport-ws@^0.9.19':
-    dependencies:
-      '@types/node': '^14.17.15'
-      '@types/ws': '^7.4.7'
   'knex@^0.19.5':
     dependencies:
       '@types/node': '^14.17.15'

packages/redux-devtools-cli/package.json

@@ -42,8 +42,7 @@
   "dependencies": {
     "@redux-devtools/app": "^1.0.0-8",
     "@types/react": "^17.0.32",
-    "apollo-server": "^2.25.2",
+    "apollo-server-express": "^3.4.0",
-    "apollo-server-express": "^2.25.2",
     "body-parser": "^1.19.0",
     "chalk": "^4.1.2",
     "cors": "^2.8.5",

packages/redux-devtools-cli/src/api/schema.ts

@@ -1,12 +1,11 @@
 import fs from 'fs';
-import { makeExecutableSchema } from 'apollo-server';
 import { Store } from '../store';
 
-const schema = fs
+export const schema = fs
   .readFileSync(require.resolve('./schema_def.graphql'))
   .toString();
 
-const resolvers = {
+export const resolvers = {
   Query: {
     reports: function report(
       source: unknown,
@@ -24,10 +23,3 @@ const resolvers = {
     },
   },
 };
-
-const executableSchema = makeExecutableSchema({
-  typeDefs: schema,
-  resolvers: resolvers,
-});
-
-export default executableSchema;

packages/redux-devtools-cli/src/middleware/graphql.ts

@@ -1,28 +1,13 @@
 import { ApolloServer } from 'apollo-server-express';
-import schema from '../api/schema';
+import { schema, resolvers } from '../api/schema';
 import { Store } from '../store';
 
 export default function (store: Store) {
   return new ApolloServer({
-    schema,
+    typeDefs: schema,
+    resolvers,
     context: {
       store: store,
     },
-    playground: {
-      endpoint: '/graphql',
-      tabs: [
-        {
-          endpoint: '/graphql',
-          query:
-            '{\n' +
-            '  reports {\n' +
-            '    id,\n' +
-            '    type,\n' +
-            '    title\n' +
-            '  }\n' +
-            '}',
-        },
-      ],
-    },
   });
 }

packages/redux-devtools-cli/src/routes.ts

@@ -5,8 +5,9 @@ import * as http from 'http';
 import bodyParser from 'body-parser';
 import cors from 'cors';
 import { SCServer } from 'socketcluster-server';
-import graphqlMiddleware from './middleware/graphql';
+import { ApolloServer } from 'apollo-server-express';
 import { AddData, ReportBaseFields, Store } from './store';
+import { resolvers, schema } from './api/schema';
 
 const app = express.Router();
 
@@ -40,9 +41,23 @@ function routes(
     else app.use(morgan('combined'));
   }
 
-  graphqlMiddleware(store).applyMiddleware({ app } as {
+  const server = new ApolloServer({
-    app: express.Application;
+    typeDefs: schema,
+    resolvers,
+    context: {
+      store: store,
+    },
   });
+  server
+    .start()
+    .then(() => {
+      server.applyMiddleware({ app } as {
+        app: express.Application;
+      });
+    })
+    .catch((error) => {
+      console.error(error); // eslint-disable-line no-console
+    });
 
   serveUmdModule('react');
   serveUmdModule('react-dom');

packages/redux-devtools-cli/src/store.ts

@@ -18,7 +18,7 @@ function error(msg: string): Promise<{ error: string }> {
 
 type ReportType = 'STATE' | 'ACTION' | 'STATES' | 'ACTIONS';
 
-interface Report {
+export interface Report {
   id: string;
   type: ReportType | null;
   title: string | null;

packages/redux-devtools-cli/test/integration.spec.ts

@@ -2,11 +2,13 @@ import childProcess from 'child_process';
 import request from 'supertest';
 import scClient from 'socketcluster-client';
 
+jest.setTimeout(10000);
+
 describe('Server', function () {
   let scServer: childProcess.ChildProcess;
   beforeAll(async function () {
     scServer = childProcess.fork(__dirname + '/../bin/redux-devtools.js');
-    await new Promise((resolve) => setTimeout(resolve, 4000));
+    await new Promise((resolve) => setTimeout(resolve, 5000));
   });
 
   afterAll(function () {