Fixed subscription issue. Related to no authorization token for WS request.

client/src/App/App.container.jsx

@@ -30,7 +30,17 @@ class AppContainer extends Component {
     const wsLink = new WebSocketLink({
       uri: process.env.REACT_APP_GRAPHQL_ENDPOINT_WS,
       options: {
-        reconnect: true
+        reconnect: true,
+        connectionParams: () => {
+          const token = localStorage.getItem("token");
+          if (token) {
+            return {
+              headers: {
+                authorization: token ? `Bearer ${token}` : ""
+              }
+            };
+          }
+        }
       }
     });
 
@@ -38,7 +48,10 @@ class AppContainer extends Component {
       // split based on operation type
       ({ query }) => {
         const definition = getMainDefinition(query);
-        console.log("##Intercepted GQL Transaction##", query);
+        console.log(
+          "##Intercepted GQL Transaction##" + definition.operation,
+          query
+        );
         return (
           definition.kind === "OperationDefinition" &&
           definition.operation === "subscription"
@@ -76,7 +89,8 @@ class AppContainer extends Component {
       link: ApolloLink.from(middlewares),
       cache,
       typeDefs,
-      resolvers
+      resolvers,
+      connectToDevTools: true
     });
 
     client.writeData({

client/src/graphql/jobs.queries.js

@@ -1,7 +1,7 @@
 import { gql } from "apollo-boost";
 
 export const GET_ALL_OPEN_JOBS = gql`
-  {
+  query GET_ALL_OPEN_JOBS {
     jobs {
       id
       est_number
@@ -24,9 +24,10 @@ export const GET_ALL_OPEN_JOBS = gql`
 `;
 
 export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
-  subscription {
+  subscription AllJobs {
     jobs {
       id
+      updated_at
       est_number
       ro_number
       status
@@ -45,3 +46,12 @@ export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
     }
   }
 `;
+
+export const test = gql`
+  subscription s {
+    masterdata {
+      key
+      value
+    }
+  }
+`;

client/src/pages/jobs/jobs.page.jsx

@@ -6,13 +6,17 @@ import { Table, Divider, Icon } from "antd";
 
 import {
   GET_ALL_OPEN_JOBS,
-  SUBSCRIPTION_ALL_OPEN_JOBS
+  SUBSCRIPTION_ALL_OPEN_JOBS,
+  test
 } from "../../graphql/jobs.queries";
 
 export default function JobsPage() {
-  const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS);
-
-  //const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS);
+  // const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS, {
+  //   fetchPolicy: "network-only"
+  // });
+  const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
+    fetchPolicy: "network-only"
+  });
 
   const columns = [
     {
@@ -76,8 +80,10 @@ export default function JobsPage() {
     }
   ];
 
-  //if (loading) return "Loading";
-  if (error) return <AlertComponent message={error.message} />;
+  if (error) {
+    console.log("error", error);
+    return <AlertComponent message={error} />;
+  }
 
   return (
     <div>