In progress subscriptions

2019-12-11 16:52:57 -08:00
parent 51040fd455
commit 5c7523e6bd
7 changed files with 118 additions and 24 deletions
--- a/client/.env
+++ b/client/.env
@@ -1,2 +1,3 @@
 REACT_APP_GRAPHQL_ENDPOINT=https://bodyshop-dev-db.herokuapp.com/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=ws://bodyshop-dev-db.herokuapp.com/v1/graphql
 REACT_APP_GA_CODE=217352234
--- a/client/package.json
+++ b/client/package.json
@@ -8,6 +8,7 @@
    "apollo-boost": "^0.4.4",
    "apollo-link-context": "^1.0.19",
    "apollo-link-logger": "^1.2.3",
+    "apollo-link-ws": "^1.0.19",
    "dotenv": "^8.2.0",
    "firebase": "^7.5.0",
    "graphql": "^14.5.8",
@@ -18,7 +19,8 @@
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-trello": "^2.2.3",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "subscriptions-transport-ws": "^0.9.16"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/client/src/App/App.container.jsx
+++ b/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}>
--- a/client/src/App/App.js
+++ b/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>
--- a/client/src/graphql/jobs.queries.js
+++ b/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
--- a/client/src/pages/jobs/jobs.page.jsx
+++ b/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>
  );
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2314,6 +2314,14 @@ apollo-link-logger@^1.2.3:
  resolved "https://registry.yarnpkg.com/apollo-link-logger/-/apollo-link-logger-1.2.3.tgz#1f3e6f7849ce7a7e3aa822141fe062cfa278b1e1"
  integrity sha512-GaVwdHyXmawfvBlHfZkFkBHH3+YH7wibzSCc4/YpIbPVtbtZqi0Qop18w++jgpw385W083DMOdYe2eJsKkZdag==

+apollo-link-ws@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.19.tgz#dfa871d4df883a8777c9556c872fc892e103daa5"
+  integrity sha512-mRXmeUkc55ixOdYRtfq5rq3o9sboKghKABKroDVhJnkdS56zthBEWMAD+phajujOUbqByxjok0te8ABqByBdeQ==
+  dependencies:
+    apollo-link "^1.2.13"
+    tslib "^1.9.3"
+
 apollo-link@^1.0.0, apollo-link@^1.0.6, apollo-link@^1.2.13:
  version "1.2.13"
  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.13.tgz#dff00fbf19dfcd90fddbc14b6a3f9a771acac6c4"
@@ -2742,6 +2750,11 @@ babylon@^6.18.0:
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==

+backo2@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
+
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -4724,6 +4737,11 @@ etag@~1.8.1:
  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=

+eventemitter3@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -6406,7 +6424,7 @@ istanbul-reports@^2.2.6:
  dependencies:
    handlebars "^4.1.2"

-iterall@^1.2.2:
+iterall@^1.2.1, iterall@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
  integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==
@@ -11465,6 +11483,17 @@ stylis@^3.5.0:
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==

+subscriptions-transport-ws@^0.9.16:
+  version "0.9.16"
+  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.16.tgz#90a422f0771d9c32069294c08608af2d47f596ec"
+  integrity sha512-pQdoU7nC+EpStXnCfh/+ho0zE0Z+ma+i7xvj7bkXKb1dvYHSZxgRPaU6spRP+Bjzow67c/rRDoix5RT0uU9omw==
+  dependencies:
+    backo2 "^1.0.2"
+    eventemitter3 "^3.1.0"
+    iterall "^1.2.1"
+    symbol-observable "^1.0.4"
+    ws "^5.2.0"
+
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -11508,7 +11537,7 @@ svgo@^1.0.0, svgo@^1.2.2:
    unquote "~1.1.1"
    util.promisify "~1.0.0"

-symbol-observable@^1.0.2, symbol-observable@^1.2.0:
+symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==