feat: update apollo-client (#1027)

Writing interaction steps to the cache caused the GET_EDIT_CAMPAIGN_DATA query to be re-fetched. The results of re-fetch then overwrote the local changes for pending interaction step changes. This re-fetch happened because in apollo-client@3 cache-and-network fetch policies re-run whenever there is a cache update that affects the query. For more information, see: apollographql/apollo-client#6760 (comment) Adapts to two apollo client changes: 1. readFragment returns null for insufficient data instead of throwing MissingFieldError exceptions 2. writeFragment now only writes to fields present in the fragment itself Reviewed-by: @ben-pr-p
politics-rewired · Feb 2, 2022 · 7931f4c · 7931f4c
1 parent 47be131
commit 7931f4c
Show file tree

Hide file tree

Showing 112 changed files with 751 additions and 918 deletions.
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -20,7 +20,7 @@ jobs:
     strategy:
       matrix:
         node-version:
-          - 14.17.5-buster
+          - 14.18.3-buster
 
     container:
       image: node:${{ matrix.node-version }}
@@ -78,7 +78,7 @@ jobs:
         run: yarn jest --forceExit --detectOpenHandles src/**/*
 
   publish-docker-image:
-    if: startsWith( github.ref, 'refs/tags/v')
+    # if: startsWith( github.ref, 'refs/tags/v')
     needs: test
     name: Publish Docker image
     runs-on: ubuntu-latest
@@ -126,8 +126,7 @@ jobs:
           build-args: |
             SPOKE_VERSION=${{ steps.image-tags.outputs.version }}
           tags: |
-            us-east4-docker.pkg.dev/spoke-rewired/spoke/core:latest
-            us-east4-docker.pkg.dev/spoke-rewired/spoke/core:${{ steps.image-tags.outputs.version }}
+            us-east4-docker.pkg.dev/spoke-rewired/spoke/core:apollo-client-v3
             us-east4-docker.pkg.dev/spoke-rewired/spoke/core:${{ steps.image-tags.outputs.sha }}
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.15
+14.16
diff --git a/Dockerfile b/Dockerfile
@@ -10,7 +10,7 @@ RUN jq '{ dependencies, devDependencies, resolutions }' < /tmp/package.json > /t
 
 ### Fat Build
 ### -------------------------
-FROM node:14.15.2 AS builder
+FROM node:14.18.3 AS builder
 
 WORKDIR /usr/Spoke
 
@@ -37,7 +37,7 @@ RUN yarn run build
 
 ### Slim Deploy
 ### -------------------------
-FROM node:14.15.2
+FROM node:14.18.3
 
 WORKDIR /usr/Spoke
 

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ that goal. See [`HOWTO_migrate-from-moveon-main.md`](./docs/HOWTO_migrate-from-m
 
 Prerequisites:
 
-- Node (>= 14.15) -- See [How to Install Node](https://nodejs.dev/learn/how-to-install-nodejs)
+- Node (>= 14.16) -- See [How to Install Node](https://nodejs.dev/learn/how-to-install-nodejs)
 - Yarn (>= 1.19.1) -- See [Installing Yarn](https://classic.yarnpkg.com/en/docs/install)
 - Postgres (>= 11) -- See [install](https://postgresql.org/download) and [start](https://www.postgresql.org/docs/current/server-start.html) documentation
 

diff --git a/__test__/backend.test.js b/__test__/backend.test.js
@@ -1,3 +1,4 @@
+import { makeExecutableSchema } from '@graphql-tools/schema'
 import { resolvers } from '../src/server/api/schema'
 import { schema } from '../src/api/schema'
 import { graphql } from 'graphql'
@@ -6,7 +7,6 @@ import { resolvers as campaignResolvers } from '../src/server/api/campaign'
 import { getContext,
   setupTest,
   cleanupTest } from './test_helpers'
-import { makeExecutableSchema } from 'graphql-tools'
 
 const mySchema = makeExecutableSchema({
   typeDefs: schema,

diff --git a/__test__/lib.test.js b/__test__/lib.test.js
@@ -1,7 +1,7 @@
+import { makeExecutableSchema } from '@graphql-tools/schema'
 import { resolvers } from '../src/server/api/schema'
 import { schema } from '../src/api/schema'
 import twilio from '../src/server/api/lib/twilio'
-import { makeExecutableSchema } from 'graphql-tools'
 
 const mySchema = makeExecutableSchema({
   typeDefs: schema,

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "engines": {
     "npm": "please-use-yarn",
     "yarn": ">= 1.19.1",
-    "node": "^14.15.2"
+    "node": "^14.16.0"
   },
   "scripts": {
     "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('spoke must be installed with Yarn: https://yarnpkg.com/')\"",
@@ -60,9 +60,12 @@
   },
   "homepage": "https://github.com/politics-rewired/Spoke",
   "dependencies": {
+    "@apollo/client": "^3.4.16",
     "@babel/runtime": "^7.9.2",
     "@babel/runtime-corejs3": "^7.9.2",
     "@google-cloud/storage": "^5.7.4",
+    "@graphql-tools/mock": "^8.4.0",
+    "@graphql-tools/schema": "^8.2.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
@@ -72,15 +75,9 @@
     "@trt2/gsm-charset-utils": "^1.0.13",
     "@types/jest": "^27.4.0",
     "aphrodite": "^2.4.0",
-    "apollo-cache": "^1.3.4",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.3",
-    "apollo-link": "^1.2.13",
-    "apollo-link-error": "^1.1.12",
-    "apollo-link-http": "^1.5.16",
-    "apollo-server-express": "^2.21.0",
-    "apollo-upload-client": "^12.1.0",
-    "apollo-utilities": "^1.3.4",
+    "apollo-server-core": "^3.4.0",
+    "apollo-server-express": "^3.4.0",
+    "apollo-upload-client": "^16.0.0",
     "assemble-numbers-client": "^1.2.5",
     "auth0-js": "^9.9.1",
     "autodetect-decoder-stream": "^1.0.3",
@@ -107,11 +104,10 @@
     "google-palette": "^1.1.0",
     "graphile-scheduler": "^0.8.0",
     "graphile-worker": "^0.5.0",
-    "graphql": "^0.13.2",
+    "graphql": "^15.6.1",
     "graphql-date": "^1.0.3",
-    "graphql-tag": "^2.10.1",
-    "graphql-tools": "^2.8.0",
-    "graphql-type-json": "^0.1.4",
+    "graphql-type-json": "^0.3.2",
+    "graphql-upload": "^12.0.0",
     "h": "^1.0.0",
     "history": "^5.0.0",
     "hot-shots": "^8.3.0",
@@ -146,7 +142,6 @@
     "prop-types": "^15.6.0",
     "query-string": "^6.9.0",
     "react": "^16.14.0",
-    "react-apollo": "^2.5.7",
     "react-chartjs-2": "^2.11.1",
     "react-dom": "^16.14.0",
     "react-file-drop": "^0.2.8",
@@ -191,6 +186,7 @@
     "@types/draft-js": "^0.10.45",
     "@types/express-rate-limit": "^5.1.1",
     "@types/faker": "^5.1.5",
+    "@types/graphql-upload": "^8.0.7",
     "@types/humps": "^2.0.1",
     "@types/lodash": "^4.14.168",
     "@types/luxon": "^1.25.2",

diff --git a/src/api/campaign-contact.ts b/src/api/campaign-contact.ts
@@ -26,7 +26,7 @@ export interface CampaignContact {
   customFields: any;
   messages: Message[];
   timezone: string;
-  location: Location;
+  location: Location | null;
   optOut: OptOut;
   campaign: Campaign;
   questionResponseValues: AnswerOption[];

diff --git a/src/api/external-sync-config.ts b/src/api/external-sync-config.ts
@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 
 import { ExternalActivistCode } from "./external-activist-code";
 import { ExternalResultCode } from "./external-result-code";

diff --git a/src/api/organization-settings.ts b/src/api/organization-settings.ts
@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 
 import { RequestAutoApproveType } from "./organization-membership";
 

diff --git a/src/api/schema.js b/src/api/schema.js
@@ -100,8 +100,8 @@ const rootSchema = `
 
   input CampaignIdContactId {
     campaignId: String!
-    campaignContactId: Int!
-    messageIds: [Int]!
+    campaignContactId: String!
+    messageIds: [String]!
   }
 
   input UpdateLinkDomain {

diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -1,8 +1,8 @@
+import { ApolloProvider } from "@apollo/client";
 import { MuiThemeProvider } from "@material-ui/core/styles";
 import { css, StyleSheet } from "aphrodite";
 import MuiThemeProviderv0 from "material-ui/styles/MuiThemeProvider";
 import React, { useEffect, useState } from "react";
-import { ApolloProvider } from "react-apollo";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import request from "superagent";
 import { QueryParamProvider } from "use-query-params";

diff --git a/src/components/AddMapping.tsx b/src/components/AddMapping.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react/no-unused-state */
+import { ApolloQueryResult, gql } from "@apollo/client";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
 import cloneDeep from "lodash/cloneDeep";
 import FlatButton from "material-ui/FlatButton";
 import MenuItem from "material-ui/MenuItem";

diff --git a/src/components/AdminDashboard.jsx b/src/components/AdminDashboard.jsx
@@ -1,9 +1,9 @@
+import { gql } from "@apollo/client";
 import { css, StyleSheet } from "aphrodite";
-import gql from "graphql-tag";
 import PropTypes from "prop-types";
 import React from "react";
-import { compose } from "react-apollo";
 import { withRouter } from "react-router-dom";
+import { compose } from "recompose";
 
 import AdminNavigation from "../containers/AdminNavigation";
 import { loadData } from "../containers/hoc/with-operations";

diff --git a/src/components/AssignmentTexter.jsx b/src/components/AssignmentTexter.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-state */
+import { gql } from "@apollo/client";
 import { css, StyleSheet } from "aphrodite";
-import gql from "graphql-tag";
 import IconButton from "material-ui/IconButton/IconButton";
 import RaisedButton from "material-ui/RaisedButton";
 import Check from "material-ui/svg-icons/action/check-circle";
@@ -9,8 +9,8 @@ import NavigateNextIcon from "material-ui/svg-icons/image/navigate-next";
 import { ToolbarTitle } from "material-ui/Toolbar";
 import PropTypes from "prop-types";
 import React from "react";
-import { compose } from "react-apollo";
 import { withRouter } from "react-router-dom";
+import { compose } from "recompose";
 
 import AssignmentTexterContact from "../containers/AssignmentTexterContact";
 import { loadData } from "../containers/hoc/with-operations";

diff --git a/src/components/AuthzProvider.jsx b/src/components/AuthzProvider.jsx
@@ -1,5 +1,5 @@
+import { gql } from "@apollo/client";
 import createReactContext from "create-react-context";
-import gql from "graphql-tag";
 import PropTypes from "prop-types";
 import React from "react";
 

diff --git a/src/components/CannedResponseMenu.jsx b/src/components/CannedResponseMenu.jsx
@@ -1,8 +1,8 @@
+import { withApollo } from "@apollo/client/react/hoc";
 import { List } from "material-ui/List";
 import Popover from "material-ui/Popover";
 import type from "prop-types";
 import React from "react";
-import { withApollo } from "react-apollo";
 
 import ScriptList from "./ScriptList";
 

diff --git a/src/components/ContactToolbar.jsx → src/components/ContactToolbar.tsx b/src/components/ContactToolbar.jsx → src/components/ContactToolbar.tsx
@@ -1,8 +1,10 @@
 import { grey100 } from "material-ui/styles/colors";
 import { Toolbar, ToolbarGroup, ToolbarTitle } from "material-ui/Toolbar";
-import PropTypes from "prop-types";
 import React from "react";
 
+import { Campaign } from "../api/campaign";
+import { CampaignContact } from "../api/campaign-contact";
+import { OranizationSettings } from "../api/organization-settings";
 import { DateTime } from "../lib/datetime";
 
 const inlineStyles = {
@@ -17,15 +19,25 @@ const inlineStyles = {
   }
 };
 
-const ContactToolbar = function ContactToolbar(props) {
+interface ContactToolbarProps {
+  campaignContact: CampaignContact;
+  contactSettings: Pick<
+    OranizationSettings,
+    "showContactLastName" | "showContactCell"
+  >;
+  rightToolbarIcon: React.ReactNode;
+  campaign: Campaign;
+}
+
+const ContactToolbar: React.FC<ContactToolbarProps> = (props) => {
   const {
     campaign,
     campaignContact,
     contactSettings,
     rightToolbarIcon
   } = props;
   const {
-    location: { city, state },
+    location: contactLocation,
     timezone: contactTimezone,
     firstName,
     lastName
@@ -40,7 +52,7 @@ const ContactToolbar = function ContactToolbar(props) {
     .setZone(timezone)
     .toLocaleString(DateTime.TIME_SIMPLE);
 
-  const location = [city, state]
+  const location = [contactLocation?.city, contactLocation?.state]
     .filter((item) => !!item)
     .join(", ")
     .trim();
@@ -70,10 +82,4 @@ const ContactToolbar = function ContactToolbar(props) {
   );
 };
 
-ContactToolbar.propTypes = {
-  campaignContact: PropTypes.object, // contacts for current assignment
-  rightToolbarIcon: PropTypes.element,
-  campaign: PropTypes.object
-};
-
 export default ContactToolbar;
diff --git a/src/components/IncomingMessageActions.jsx b/src/components/IncomingMessageActions.jsx
@@ -102,7 +102,7 @@ class IncomingMessageActions extends Component {
   render() {
     let texters = this.props.people || [];
     texters = texters.map((texter) => ({
-      value: parseInt(texter.id, 10),
+      value: texter.id,
       label: formatTexter(texter)
     }));
 

diff --git a/src/components/IncomingMessageList/MessageColumn/MessageList.tsx b/src/components/IncomingMessageList/MessageColumn/MessageList.tsx
@@ -1,5 +1,5 @@
+import { gql } from "@apollo/client";
 import { css, StyleSheet } from "aphrodite";
-import gql from "graphql-tag";
 import React, { Component } from "react";
 
 import { Message } from "../../../api/message";

diff --git a/src/components/IncomingMessageList/MessageColumn/MessageOptOut.tsx b/src/components/IncomingMessageList/MessageColumn/MessageOptOut.tsx
@@ -1,10 +1,9 @@
+import { ApolloQueryResult, gql } from "@apollo/client";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
 import FlatButton from "material-ui/FlatButton";
 import RaisedButton from "material-ui/RaisedButton";
 import React, { Component } from "react";

diff --git a/src/components/IncomingMessageList/MessageColumn/MessageResponse.tsx b/src/components/IncomingMessageList/MessageColumn/MessageResponse.tsx
@@ -1,10 +1,9 @@
+import { ApolloQueryResult, gql } from "@apollo/client";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
 import FlatButton from "material-ui/FlatButton";
 import React, { Component } from "react";
 import * as yup from "yup";

diff --git a/src/components/IncomingMessageList/SurveyColumn/ManageSurveyResponses.tsx b/src/components/IncomingMessageList/SurveyColumn/ManageSurveyResponses.tsx
@@ -1,10 +1,9 @@
+import { ApolloQueryResult, gql } from "@apollo/client";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
 import FlatButton from "material-ui/FlatButton";
 import MenuItem from "material-ui/MenuItem";
 import SelectField from "material-ui/SelectField";

diff --git a/src/components/IncomingMessageList/SurveyColumn/ManageTags.jsx b/src/components/IncomingMessageList/SurveyColumn/ManageTags.jsx
@@ -1,9 +1,9 @@
+import { gql } from "@apollo/client";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import gql from "graphql-tag";
 import isEqual from "lodash/isEqual";
 import FlatButton from "material-ui/FlatButton";
 import RaisedButton from "material-ui/RaisedButton";

diff --git a/src/components/IncomingMessageList/SurveyColumn/index.tsx b/src/components/IncomingMessageList/SurveyColumn/index.tsx
@@ -1,5 +1,4 @@
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
+import { ApolloQueryResult, gql } from "@apollo/client";
 import RaisedButton from "material-ui/RaisedButton";
 import Snackbar from "material-ui/Snackbar";
 import React, { Component } from "react";

diff --git a/src/components/IncomingMessageList/index.jsx b/src/components/IncomingMessageList/index.jsx
@@ -1,11 +1,11 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 import DataTables from "material-ui-datatables";
 import FlatButton from "material-ui/FlatButton";
 import ActionOpenInNew from "material-ui/svg-icons/action/open-in-new";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import { compose } from "react-apollo";
 import { withRouter } from "react-router-dom";
+import { compose } from "recompose";
 
 import { loadData } from "../../containers/hoc/with-operations";
 import { MESSAGE_STATUSES } from "../IncomingMessageFilter";