feat: add wsLink to apolloClient

next.config.js

@@ -3,7 +3,7 @@ const { ANALYZE } = process.env
 const publicRuntimeConfig = {
   // Will be available on both server and client
   GRAPHQL_ENDPOINT: 'http://localhost:3020/graphql',
-  WS_ENDPOINT: `ws://localhost:3020/api/ws`,
+  WS_ENDPOINT: 'ws://localhost:3020/graphql',
   TOKEN_MAX_AGE: 25 * 60, // 25 minutes in seconds
   REFRESH_TOKEN_MAX_AGE: 7 * 24 * 60 * 60, // 7 days in seconds
   DEVELOPMENT_MODE: process.env.NODE_ENV

src/common/init-apollo.js

@@ -2,10 +2,12 @@ import { ApolloClient } from 'apollo-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { HttpLink } from 'apollo-link-http'
 import { withClientState } from 'apollo-link-state'
-import { ApolloLink } from 'apollo-link'
+import { ApolloLink, split } from 'apollo-link'
 import { setContext } from 'apollo-link-context'
+import { getMainDefinition } from 'apollo-utilities'
 import fetch from 'isomorphic-unfetch'
 import getConfig from 'next/config'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
 
 import { storeTokensInCookie } from './manage-token'
 import { localStateResolvers, getTokens } from './localState'
@@ -70,6 +72,16 @@ function create(initialState, { token = '', refreshToken = '' }) {
     }
   })
 
+  const wsLink = process.browser
+    ? new SubscriptionClient(WS_ENDPOINT, {
+        reconnect: true,
+        connectionParams: {
+          // Connection parameters to pass some validations
+          // on server side during first handshake
+        }
+      })
+    : null
+
   const stateLink = withClientState({
     cache,
     defaults: {
@@ -88,9 +100,24 @@ function create(initialState, { token = '', refreshToken = '' }) {
     // Additional fetch() options like `credentials` or `headers` can be added here
   })
 
-  const httpLinkWithMiddleware = afterwareLink.concat(authLink.concat(httpLink))
-
-  const link = ApolloLink.from([stateLink, httpLinkWithMiddleware])
+  const wsHttpLink = process.browser
+    ? split(
+        //only create the split in the browser
+        // split based on operation type
+        ({ query }) => {
+          const { kind, operation } = getMainDefinition(query)
+          return kind === 'OperationDefinition' && operation === 'subscription'
+        },
+        wsLink,
+        httpLink
+      )
+    : httpLink
+
+  const wsHttpLinkWithMiddleware = afterwareLink.concat(
+    authLink.concat(wsHttpLink)
+  )
+
+  const link = ApolloLink.from([stateLink, wsHttpLinkWithMiddleware])
 
   // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
   return new ApolloClient({

src/features/team/pages/team-page.js

@@ -59,6 +59,7 @@ export class TeamPage extends Component {
       const currentChannel = currentTeam.channels.find(
         (channel) => channel.id === currentMessagesId
       )
+
       if (!currentChannel) {
         const generalChannel = currentTeam.channels.find(
           (channel) => channel.name === 'general'

src/i18n/en.json

@@ -12,15 +12,6 @@
       "password": "Password"
     }
   },
-  "add-channel-form": {
-    "title": "Add channel",
-    "submit-button": "Create channel",
-    "input": {
-      "name": {
-        "placeholder": "Channel name"
-      }
-    }
-  },
   "invite-user-form": {
     "title": "Invite users to your team",
     "submit-button": "Send invite",
@@ -30,6 +21,15 @@
       }
     }
   },
+  "add-channel-form": {
+    "title": "Add channel",
+    "submit-button": "Create channel",
+    "input": {
+      "name": {
+        "placeholder": "Channel name"
+      }
+    }
+  },
   "register-page": {
     "sub-header": "Fill out the form and join the talkbox community!",
     "main-header": "Register",

src/i18n/ru.json

@@ -12,20 +12,20 @@
       "password": ""
     }
   },
-  "add-channel-form": {
+  "invite-user-form": {
     "title": "",
     "submit-button": "",
     "input": {
-      "name": {
+      "email": {
         "placeholder": ""
       }
     }
   },
-  "invite-user-form": {
+  "add-channel-form": {
     "title": "",
     "submit-button": "",
     "input": {
-      "email": {
+      "name": {
         "placeholder": ""
       }
     }