Update apollo

core/admins/hooks/admins.js

@@ -1,5 +1,4 @@
-import gql from 'graphql-tag';
-import { useMutation } from 'react-apollo';
+import { gql, useMutation } from '@apollo/client';
 
 import withoutParams from '../../../src/helpers/without-params';
 

core/admins/pages/admins.js

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { Table, Icon, ButtonGroup, Button } from 'rsuite';
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
+
 
 const { Column, HeaderCell, Cell } = Table;
 

core/chatbot-configuration/pages/configure-chatbot.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FlexboxGrid } from 'rsuite';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from 'react-apollo';
+import { useQuery, useMutation, gql } from '@apollo/client';
 import { Notification } from 'rsuite';
 import _ from 'lodash';
 
@@ -55,7 +54,6 @@ const ConfigureChatbot = () => {
     }
   });
 
-  console.log('loading', loading)
   const ready = !loading;
   const disabled = editLoading;
   const error = loadError || editError;
@@ -65,7 +63,7 @@ const ConfigureChatbot = () => {
       {_.isEmpty(state.chatbotId) && (
         <>
           <Breadcrumbs pages={['Chatbot']}/>
-          <FlexboxGrid justify="space-between">
+          <FlexboxGrid justify='space-between'>
             <FlexboxGrid.Item colspan={17} style={{ paddingTop: '20px', paddingLeft: '20px' }}>
               <strong>Select a chatbot</strong> from the drop down menu in the top right corner.
             </FlexboxGrid.Item>

core/devices/pages/device.js

@@ -1,7 +1,6 @@
 import React, { useState, useRef, Fragment, useCallback } from 'react';
 import { Table, Icon, ButtonGroup, Button, FlexboxGrid } from 'rsuite';
-import { useQuery, useMutation, useSubscription } from 'react-apollo';
-import gql from 'graphql-tag';
+import { useQuery, useSubscription, gql } from '@apollo/client';
 import GoogleMapReact from 'google-map-react';
 
 import {

core/devices/pages/devices.js

@@ -1,8 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { Table, Icon, ButtonGroup, Button } from 'rsuite';
-import gql from 'graphql-tag';
 import { Link } from 'react-router-dom';
-import { useMutation } from 'react-apollo';
+import { useMutation, gql } from '@apollo/client';
 
 const { Column, HeaderCell, Cell } = Table;
 

core/devices/views/modal-device.js

@@ -1,6 +1,5 @@
 import React, { useState, Fragment, useRef } from 'react';
-import gql from 'graphql-tag';
-import { useQuery } from 'react-apollo';
+import { useQuery, gql } from '@apollo/client';
 import PropTypes from 'prop-types';
 import {
   Modal,

core/messages/pages/message-logs.js

@@ -1,8 +1,6 @@
 import React, { useRef } from 'react';
-import gql from 'graphql-tag';
 import classNames from 'classnames';
-import _ from 'lodash';
-import { useApolloClient } from 'react-apollo';
+import { useApolloClient, gql } from '@apollo/client';
 import { Table, Icon, SelectPicker, Button, ButtonGroup } from 'rsuite';
 
 const { Column, HeaderCell, Cell } = Table;
@@ -17,7 +15,7 @@ import SmartDate from '../../../src/components/smart-date';
 import { Input } from '../../../src/components/table-filters';
 import { useModal } from '../../../src/components/modal';
 import CustomTable from '../../../src/components/table';
-import useClient from '../../../src/hooks/client';
+//import useClient from '../../../src/hooks/client';
 import useMCContext from '../../../src/hooks/mc-context';
 
 import '../styles/message-logs.scss';

core/plugins-manager/pages/plugins.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Notification, Message, FlexboxGrid, Input, Checkbox } from 'rsuite';
-import { useMutation, useApolloClient } from 'react-apollo';
+import { useMutation, useApolloClient } from '@apollo/client';
 import useFetch from 'use-http';
 
 import ModalLoader from '../../../src/components/loader-modal';

core/plugins-manager/queries.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const INSTALL_PLUGIN = gql`
 mutation (

core/tasks-queues/hooks/tasks.js

@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 
 import withoutParams from '../../../src/helpers/without-params';
 

core/tasks-queues/views/queues.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Table, Icon, ButtonGroup, Button, ButtonToolbar } from 'rsuite';
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
 
 const { Column, HeaderCell, Cell } = Table;

core/user-record/pages/user-record.js

@@ -1,5 +1,5 @@
 import React, { useState, useReducer } from 'react';
-import { useQuery, useMutation } from 'react-apollo';
+import { useQuery, useMutation, gql } from '@apollo/client';
 import { Button } from 'rsuite';
 import {
   BrowserRouter as Router,
@@ -10,8 +10,6 @@ import {
   useParams
 } from 'react-router-dom';
 
-import gql from 'graphql-tag';
-
 import { useCodePlug } from 'code-plug';
 import PageContainer from '../../../src/components/page-container';
 import Breadcrumbs from '../../../src/components/breadcrumbs';

core/user-record/views/modal-payload.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, Button } from 'rsuite';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from 'react-apollo'
+//import { useQuery, useMutation, gql } from '@apollo/client';
 import ReactJson from 'react-json-view'
 
 //import WarningBox from '../../components/warning-box';

core/users/hooks/merge-user.js

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { useMutation } from 'react-apollo';
+import { useMutation, gql } from '@apollo/client';
 import _ from 'lodash';
 import { Modal, FormGroup, ControlLabel, FormControl, HelpBlock, Form, Button } from 'rsuite';
-import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import useMCContext from '../../../src/hooks/mc-context';

core/users/hooks/users.js

@@ -1,6 +1,5 @@
-import { useState } from 'react';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from 'react-apollo';
+//import { useState } from 'react';
+import { gql, useMutation } from '@apollo/client';
 
 import withoutParams from '../../../src/helpers/without-params';
 

core/users/pages/users.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Table, Icon, ButtonGroup, Button, ButtonToolbar } from 'rsuite';
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const { Column, HeaderCell, Cell } = Table;
 

database/client.js

@@ -1,45 +1,17 @@
-
-const { ApolloClient } = require('apollo-boost');
-const { InMemoryCache } = require('apollo-cache-inmemory');
-const { createHttpLink } = require('apollo-link-http');
-const { ApolloLink, split } = require('apollo-link');
-const { getMainDefinition } = require('apollo-utilities');
-const { WebSocketLink } = require('apollo-link-ws');
-const ws = require('ws');
+const { ApolloClient, InMemoryCache, HttpLink } = require('@apollo/client');
 const _ = require('lodash');
 const fetch = require('node-fetch').default;
 
-
+// DOCS: https://www.apollographql.com/docs/react/data/subscriptions/
 
 module.exports = RED => {
-  const cache = new InMemoryCache();
-  const host = !_.isEmpty(RED.settings.uiHost) ? RED.settings.uiHost : 'localhost';
-  //console.log(`Opening client: http://${host}:${RED.settings.uiPort}/graphql`);
-  const apolloLink = createHttpLink({ uri: `http://${host}:${RED.settings.uiPort}/graphql`, fetch: fetch });
 
-  const wsLink = new WebSocketLink({
-    uri: 'ws://localhost:1943/',
-    options: {
-      reconnect: true
-    },
-    webSocketImpl: ws
-  });
-
-  const link = split(
-    // split based on operation type
-    ({ query }) => {
-      const definition = getMainDefinition(query);
-      return (
-        definition.kind === 'OperationDefinition' &&
-        definition.operation === 'subscription'
-      );
-    },
-    wsLink,
-    apolloLink,
-  );
+  const cache = new InMemoryCache();
+  const host = !_.isEmpty(RED.settings.uiHost) &  RED.settings.uiHost !== '0.0.0.0' ? RED.settings.uiHost : 'localhost';
+  const apolloLink = new HttpLink({ uri: `http://${host}:${RED.settings.uiPort}/graphql`, fetch });
 
   return new ApolloClient({
     cache,
-    link: ApolloLink.from([link])
+    link: apolloLink
   });
 };

database/graphql.js

@@ -1,7 +1,6 @@
-const { ApolloServer } = require('apollo-server-express');
+const { ApolloServer } = require('@apollo/server');
 const { resolver } = require('graphql-sequelize');
 const { Kind } = require('graphql/language');
-const { PubSub } = require('graphql-subscriptions');
 const _ = require('lodash');
 const geolib = require('geolib');
 const Sequelize = require('sequelize');
@@ -19,7 +18,6 @@ const translateWhere = require('../src/helpers/translate-where');
 
 const directus = new Directus('https://dashboard.red-bot.io');
 const Op = Sequelize.Op;
-const pubsub = new PubSub();
 
 const deleteFile = filename => new Promise((resolve, reject) => {
   fs.unlink(filename, err => {
@@ -552,7 +550,7 @@ module.exports = ({
         }
       },
       messages: {
-        type: GraphQLList(messageType),
+        type: new GraphQLList(messageType),
         args: {
           offset: { type: GraphQLInt },
           limit: { type: GraphQLInt },
@@ -1593,7 +1591,7 @@ module.exports = ({
         editChatbot: {
           type: chatbotType,
           args: {
-            id: { type: GraphQLNonNull(GraphQLInt) },
+            id: { type: new GraphQLNonNull(GraphQLInt) },
             chatbot: { type: new GraphQLNonNull(inputChatbotType)}
           },
           async resolve(root, { chatbot, id }) {
@@ -2584,7 +2582,7 @@ module.exports = ({
     }),
 
 
-    subscription: new GraphQLObjectType({
+    /*subscription: new GraphQLObjectType({
       name: 'Subscriptions',
       fields: {
         deviceUpdated: {
@@ -2600,7 +2598,7 @@ module.exports = ({
         }
       }
 
-    })
+    })*/
 
   });
 

lib/sender-factory/index.js

@@ -187,7 +187,6 @@ const GenericBotNode = (
 const GenericInNode = (platform, RED) => {
   const { storeInboundMessage } = StoreMessages(RED);
   const isMissionControlEnabled = require('../../lib/helpers/is-mc-enabled')(RED);
-
   return function(config) {
     RED.nodes.createNode(this, config);
     const globalContextHelper = GlobalContextHelper(RED);

lib/sender-factory/store-messages.js

@@ -1,6 +1,6 @@
 const _ = require('lodash')
 const moment = require('moment');
-const gql = require('graphql-tag');
+const { gql } = require('@apollo/client');
 
 const { graphQLError } = require('../../lib/lcd/index');
 const { when } = require('../../lib/utils/index');

nodes/chatbot-telegram-receive.js

@@ -1,5 +1,8 @@
+
 const TelegramServer = require('../lib/platforms/telegram');
+
 const RegisterType = require('../lib/node-installer');
+
 const { GenericOutNode, GenericInNode, GenericBotNode } = require('../lib/sender-factory/index');
 
 module.exports = function(RED) {

nodes/mc-content.js

@@ -1,5 +1,5 @@
 const _ = require('lodash');
-const gql = require('graphql-tag');
+const { gql } = require('@apollo/client');
 
 const Client = require('../database/client');
 const MessageTemplate = require('../lib/message-template-async');

nodes/mc-graphql.js

@@ -1,5 +1,5 @@
 const _ = require('lodash');
-const gql = require('graphql-tag');
+const { gql } = require('@apollo/client');
 
 const Client = require('../database/client');
 const lcd = require('../lib/lcd/index');

nodes/mc-user-payload.js

@@ -1,5 +1,5 @@
 const _ = require('lodash');
-const gql = require('graphql-tag');
+const { gql } = require('@apollo/client');
 
 const Client = require('../database/client');
 const lcd = require('../lib/lcd/index');

nodes/mc-user.js

@@ -1,5 +1,5 @@
 const _ = require('lodash');
-const gql = require('graphql-tag');
+const { gql } = require('@apollo/client');
 
 const Client = require('../database/client');
 

nodes/mc.js

@@ -3,6 +3,9 @@ const serveStatic = require('serve-static');
 const path = require('path');
 const events = require('events');
 const fs = require('fs');
+const { expressMiddleware } = require('@apollo/server/express4');
+const cors = require('cors');
+const { json } = require('body-parser');
 
 const session = require('express-session');
 const _ = require('lodash');
@@ -309,7 +312,11 @@ Some **formatting** is _allowed_!`
     }
     next();
   });
-  graphQLServer.applyMiddleware({ app });
+  //graphQLServer.applyMiddleware({ app });
+
+  await graphQLServer.start();
+  app.use('/graphql', cors(), json(), expressMiddleware(graphQLServer));
+
 
   // eslint-disable-next-line no-console
   console.log(lcd.timestamp() + '  ' + lcd.green('GraphQL URL: ')
@@ -439,7 +446,10 @@ Some **formatting** is _allowed_!`
         if (frontendEnvironment === 'plugin' || frontendEnvironment === 'production') {
           pluginsScript = plugins.map(plugin => `<script src="${mcSettings.root}/plugins/${plugin.filename}"></script>`);
         }
-        const json = `<script>var bootstrap = ${JSON.stringify(bootstrap)};var mc_environment='${frontendEnvironment}';</script>`;
+        const json = `<script>
+        window.process = { env: { NODE_ENV: 'development' }};
+        var bootstrap = ${JSON.stringify(bootstrap)};var mc_environment='${frontendEnvironment}';
+        </script>`;
         res.send(template.replace('{{data}}', json).replace('{{assets}}', assets).replace('{{plugins}}', pluginsScript.join('')));
      });
     }