In progress subscriptions

client/src/App/App.container.jsx

@@ -6,8 +6,11 @@ import App from "./App";
 import Spin from "../components/loading-spinner/loading-spinner.component";
 
 import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
+import { split } from "apollo-link";
 import { HttpLink } from "apollo-link-http";
+import { WebSocketLink } from "apollo-link-ws";
+import { getMainDefinition } from "apollo-utilities";
+import { InMemoryCache } from "apollo-cache-inmemory";
 import { setContext } from "apollo-link-context";
 import { resolvers, typeDefs } from "../graphql/resolvers";
 import apolloLogger from "apollo-link-logger";
@@ -26,6 +29,27 @@ class AppContainer extends Component {
       uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
     });
 
+    const wsLink = new WebSocketLink({
+      uri: process.env.REACT_APP_GRAPHQL_ENDPOINT_WS,
+      options: {
+        reconnect: true
+      }
+    });
+
+    const link = split(
+      // split based on operation type
+      ({ query }) => {
+        const definition = getMainDefinition(query);
+        console.log("000000", definition.operation);
+        return (
+          definition.kind === "OperationDefinition" &&
+          definition.operation === "subscription"
+        );
+      },
+      wsLink,
+      httpLink
+    );
+
     const authLink = setContext((_, { headers }) => {
       // get the authentication token from local storage if it exists
       const token = localStorage.getItem("token");
@@ -46,7 +70,7 @@ class AppContainer extends Component {
     if (process.env.NODE_ENV === "development") {
       middlewares.push(apolloLogger);
     }
-    middlewares.push(authLink.concat(httpLink));
+    middlewares.push(authLink.concat(link));
 
     const cache = new InMemoryCache({ addTypename: false });
 
@@ -61,7 +85,7 @@ class AppContainer extends Component {
           errorPolicy: "ignore"
         },
         query: {
-          fetchPolicy: "network-only",
+          fetchPolicy: "cache-and-network",
           errorPolicy: "all"
         }
       }
@@ -98,6 +122,7 @@ class AppContainer extends Component {
     if (!loaded) {
       return <Spin />;
     }
+
     return (
       <ApolloProvider client={client}>
         <Query query={GET_CURRENT_USER}>

client/src/App/App.js

@@ -18,11 +18,10 @@ class App extends React.Component {
 
   componentDidMount() {
     const { setCurrentUser } = this.props;
-
+    console.log("DIDMOUNT");
     this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
       console.log("Current User:", user);
       if (user) {
-
         const token = await user.getIdToken();
         const idTokenResult = await user.getIdTokenResult();
         const hasuraClaim =
@@ -48,7 +47,7 @@ class App extends React.Component {
             });
           });
         }
-console.log('###Debug (app.js)| Token', token)
+        // console.log('###Debug (app.js)| Token', token)
         //add the bearer token to the headers.
         localStorage.setItem("token", token);
       } else {
@@ -67,7 +66,10 @@ console.log('###Debug (app.js)| Token', token)
   }
 
   render() {
-    console.log("###Debug (App.js) | Props Current User: ", this.props.currentUser.email);
+    console.log(
+      "###Debug (App.js) | Props Current User: ",
+      this.props.currentUser.email
+    );
     return (
       <div>
         <Switch>

client/src/graphql/jobs.queries.js

@@ -1,7 +1,30 @@
-import gql from "graphql-tag";
+import { gql } from "apollo-boost";
 
 export const GET_ALL_OPEN_JOBS = gql`
-  {
+  query {
+    jobs {
+      id
+      est_number
+      ro_number
+      status
+      scheduled_completion
+      scheduled_delivery
+      vehicle {
+        v_model_yr
+        v_make_desc
+        v_model_desc
+        plate_no
+      }
+      owner {
+        first_name
+        last_name
+      }
+    }
+  }
+`;
+
+export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
+  subscription {
     jobs {
       id
       est_number

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

@@ -1,16 +1,17 @@
 import React from "react";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery, useSubscription } from "@apollo/react-hooks";
 //import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { Table, Divider, Icon } from "antd";
 
-import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import {
+  GET_ALL_OPEN_JOBS,
+  SUBSCRIPTION_ALL_OPEN_JOBS
+} from "../../graphql/jobs.queries";
 
 export default function JobsPage() {
-  const {
-    loading,
-    error,
-    data: { jobs }
-  } = useQuery(GET_ALL_OPEN_JOBS);
+  const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS);
+
+  //const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS);
 
   const columns = [
     {
@@ -34,7 +35,9 @@ export default function JobsPage() {
       key: "customer",
       render: (text, record) => {
         return record.owner ? (
-          <div>{record.owner.first_name + " " + record.owner.last_name}</div>
+          <div>
+            {record.owner.first_name} {record.owner.last_name}
+          </div>
         ) : (
           "No Customer"
         );
@@ -45,7 +48,14 @@ export default function JobsPage() {
       dataIndex: "vehicle",
       key: "vehicle",
       render: (text, record) => {
-        return record.vehicle ? record.vehicle.v_make_desc : "No Vehicle";
+        return record.vehicle ? (
+          <div>
+            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
+            {record.vehicle.v_model_desc}
+          </div>
+        ) : (
+          "No Vehicle"
+        );
       }
     },
     {
@@ -65,9 +75,11 @@ export default function JobsPage() {
     }
   ];
 
-  // if (loading) return <Spin />;
+  //if (loading) return "Loading";
   if (error) return `Error! ${error.message}`;
-  console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
+  //console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
+  console.log("JobsPage Rendering...");
+
   return (
     <div>
       <Table
@@ -75,7 +87,7 @@ export default function JobsPage() {
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
-        dataSource={jobs ? jobs : null}
+        dataSource={data ? data.jobs : null}
       />
     </div>
   );