feat: update apollo-client

__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,

__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,

package.json

@@ -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",
@@ -71,15 +74,9 @@
     "@slack/web-api": "^6.0.0",
     "@trt2/gsm-charset-utils": "^1.0.13",
     "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",
@@ -106,11 +103,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",
@@ -145,7 +141,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",
@@ -190,6 +185,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",

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";

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";

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";

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";

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";

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";
 

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";
 

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";

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";

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";

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";

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";

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";

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";

src/components/InfiniteRelayList.tsx

@@ -1,7 +1,7 @@
-import { FetchPolicy } from "apollo-client";
+import { FetchPolicy } from "@apollo/client";
+import { Query } from "@apollo/client/react/components";
 import produce, { Draft } from "immer";
 import React from "react";
-import { Query } from "react-apollo";
 
 import { emptyRelayPage, RelayPaginatedResponse } from "../api/pagination";
 import ChildOnly from "./ChildOnly";

src/components/NotificationCard.tsx

@@ -1,3 +1,4 @@
+import { gql } from "@apollo/client";
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
@@ -6,7 +7,6 @@ import CardHeader from "@material-ui/core/CardHeader";
 import Divider from "@material-ui/core/Divider";
 import OpenInNew from "@material-ui/icons/OpenInNew";
 import Warning from "@material-ui/icons/Warning";
-import gql from "graphql-tag";
 import React from "react";
 
 import {

src/components/QuestionResponseConfig/index.tsx

@@ -1,5 +1,4 @@
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
+import { ApolloQueryResult, gql } from "@apollo/client";
 import cloneDeep from "lodash/cloneDeep";
 import Avatar from "material-ui/Avatar";
 import { Card, CardHeader, CardText } from "material-ui/Card";

src/components/ScriptList.jsx

@@ -1,7 +1,7 @@
+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 gql from "graphql-tag";
 import Divider from "material-ui/Divider";
 import FlatButton from "material-ui/FlatButton";
 import { List, ListItem } from "material-ui/List";

src/components/SyncConfigurationModal/index.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 cloneDeep from "lodash/cloneDeep";
 import FlatButton from "material-ui/FlatButton";
 import React from "react";

src/components/SyncConfigurationModal/queries.tsx

@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 
 import { FullListRefreshFragment } from "../../api/external-sync-config";
 

src/components/TexterRequest.jsx

@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 import MenuItem from "material-ui/MenuItem";
 import Paper from "material-ui/Paper";
 import RaisedButton from "material-ui/RaisedButton";

src/components/TopNav.tsx

@@ -1,5 +1,5 @@
+import { gql } from "@apollo/client";
 import { css, StyleSheet } from "aphrodite";
-import gql from "graphql-tag";
 import IconButton from "material-ui/IconButton";
 import muiThemeable from "material-ui/styles/muiThemeable";
 import ArrowBackIcon from "material-ui/svg-icons/navigation/arrow-back";

src/containers/AdminAssignmentControl/index.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 { Card, CardActions, CardHeader, CardText } from "material-ui/Card";
 import FlatButton from "material-ui/FlatButton";
 import RaisedButton from "material-ui/RaisedButton";

src/containers/AdminAssignmentRequest/index.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 PropTypes from "prop-types";

src/containers/AdminBulkScriptEditor/index.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 pick from "lodash/pick";
 import FlatButton from "material-ui/FlatButton";
 import Paper from "material-ui/Paper";

src/containers/AdminCampaignEdit/components/SectionWrapper.tsx

@@ -1,6 +1,5 @@
+import { ApolloQueryResult, gql } from "@apollo/client";
 import { useTheme } from "@material-ui/core";
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
 import Avatar from "material-ui/Avatar";
 import { Card, CardActions, CardHeader, CardText } from "material-ui/Card";
 import CircularProgress from "material-ui/CircularProgress";

src/containers/AdminCampaignEdit/index.jsx

@@ -18,7 +18,7 @@ import CancelIcon from "material-ui/svg-icons/navigation/cancel";
 import PropTypes from "prop-types";
 import queryString from "query-string";
 import React from "react";
-import { compose } from "react-apollo";
+import { compose } from "recompose";
 
 import { withAuthzContext } from "../../components/AuthzProvider";
 import { camelCase, dataTest } from "../../lib/attributes";
@@ -736,7 +736,7 @@ class AdminCampaignEdit extends React.Component {
     const sections = this.sections();
     const { expandedSection, requestError } = this.state;
     const { adminPerms, match, theme: stableMuiTheme } = this.props;
-    const campaignId = parseInt(match.params.campaignId, 10);
+    const { campaignId } = match.params;
     const isNew = this.isNew();
     const saveLabel = isNew ? "Save and goto next section" : "Save";
 

src/containers/AdminCampaignEdit/queries.ts

@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import { gql } from "@apollo/client";
 
 export const GET_ORGANIZATION_DATA = gql`
   query getOrganizationData($organizationId: String!) {
@@ -84,16 +84,6 @@ export const EditCampaignFragment = gql`
       id
       title
     }
-    interactionSteps {
-      id
-      questionText
-      scriptOptions
-      answerOption
-      answerActions
-      parentInteractionId
-      isDeleted
-      createdAt
-    }
     editors
   }
 `;

src/containers/AdminCampaignEdit/sections/CampaignAutoassignModeForm.tsx

@@ -1,5 +1,4 @@
-import { ApolloQueryResult } from "apollo-client";
-import gql from "graphql-tag";
+import { ApolloQueryResult, gql } from "@apollo/client";
 import { TextField } from "material-ui";
 import RaisedButton from "material-ui/RaisedButton";
 import Toggle from "material-ui/Toggle";