apollo-error-fiddling.diff

diff --git a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.stories.tsx b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.stories.tsx
index 36ba6ed06..e3d67b7f6 100644
--- a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.stories.tsx
+++ b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.stories.tsx
@@ -19,15 +19,11 @@ export const withError = () => (
 );
 
 export const withNetworkServerError = () => (
-  <ApolloErrorAlert error={NETWORK_SERVER_ERROR as unknown as ApolloError} />
+  <ApolloErrorAlert error={NETWORK_SERVER_ERROR} />
 );
 
 export const withNetworkServerParseError = () => (
-  <ApolloErrorAlert
-    error={NETWORK_SERVER_PARSE_ERROR as unknown as ApolloError}
-  />
+  <ApolloErrorAlert error={NETWORK_SERVER_PARSE_ERROR} />
 );
 
-export const withGQLError = () => (
-  <ApolloErrorAlert error={GQL_ERROR as unknown as ApolloError} />
-);
+export const withGQLError = () => <ApolloErrorAlert error={GQL_ERROR} />;
diff --git a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.test.tsx b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.test.tsx
index 8da038a6e..ea52596c9 100644
--- a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.test.tsx
+++ b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/index.test.tsx
@@ -2,13 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { ApolloError } from "@apollo/client";
+import { ApolloError, ServerError, ServerParseError } from "@apollo/client";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import ApolloErrorAlert from ".";
 import {
   GQL_ERROR,
-  NETWORK_ERROR,
   NETWORK_SERVER_ERROR,
   NETWORK_SERVER_PARSE_ERROR,
 } from "./mocks";
@@ -21,42 +20,37 @@ describe("ApolloErrorAlert", () => {
   });
 
   it("handles a network server error", () => {
-    render(
-      <ApolloErrorAlert
-        error={NETWORK_SERVER_ERROR as unknown as ApolloError}
-      />,
-    );
+    render(<ApolloErrorAlert error={NETWORK_SERVER_ERROR} />);
     screen.getByText("Network Error");
     screen.getByText(NETWORK_SERVER_ERROR.message);
     screen.getByText(
-      NETWORK_SERVER_ERROR.networkError.result.errors[0].message,
+      (NETWORK_SERVER_ERROR.networkError as ServerError).result.errors[0]
+        .message,
     );
   });
 
   it("handles a network server parse error", () => {
-    render(
-      <ApolloErrorAlert
-        error={NETWORK_SERVER_PARSE_ERROR as unknown as ApolloError}
-      />,
-    );
+    render(<ApolloErrorAlert error={NETWORK_SERVER_PARSE_ERROR} />);
     screen.getByText("Network Error");
     screen.getByText(NETWORK_SERVER_PARSE_ERROR.message);
-    screen.getByText(NETWORK_SERVER_PARSE_ERROR.networkError.statusCode);
+    screen.getByText(
+      (NETWORK_SERVER_PARSE_ERROR.networkError as ServerParseError).statusCode,
+    );
     // an actual bodyText response is difficult to test for; just check for error details
     screen.getByText("Request URL:", { exact: false });
   });
 
-  it("handles a network error", () => {
-    render(
-      <ApolloErrorAlert error={NETWORK_ERROR as unknown as ApolloError} />,
-    );
-    screen.getByText("Network Error");
-    screen.getByText(NETWORK_ERROR.message);
-    screen.getByText(NETWORK_ERROR.networkError.result.errors[0].message);
-  });
+  // it("handles a network error", () => {
+  //   render(
+  //     <ApolloErrorAlert error={NETWORK_ERROR} />,
+  //   );
+  //   screen.getByText("Network Error");
+  //   screen.getByText(NETWORK_ERROR.message);
+  //   screen.getByText(NETWORK_ERROR.networkError.result.errors[0].message);
+  // });
 
   it("handles a graphQL error", () => {
-    render(<ApolloErrorAlert error={GQL_ERROR as unknown as ApolloError} />);
+    render(<ApolloErrorAlert error={GQL_ERROR} />);
     screen.getByText("GraphQL Apollo Error");
     // in this case, `GQL_ERROR.message` matches `GQL_ERROR.graphQLErrors[0].message`
     expect(screen.getAllByText(GQL_ERROR.message)).toHaveLength(2);
diff --git a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/mocks.tsx b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/mocks.tsx
index 847593867..021a38869 100644
--- a/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/mocks.tsx
+++ b/app/experimenter/nimbus-ui/src/components/ApolloErrorAlert/mocks.tsx
@@ -2,13 +2,56 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export const NETWORK_SERVER_ERROR = {
-  graphQLErrors: [],
-  networkError: {
-    name: "ServerError",
-    response: {},
-    statusCode: 400,
-    result: {
+import { ApolloError, ServerError, ServerParseError } from "@apollo/client";
+import { GraphQLError } from "graphql";
+
+class MockServerError extends Error implements ServerError {
+  response: Response;
+
+  constructor(
+    message: string,
+    public statusCode: number,
+    public result: Record<string, any>,
+  ) {
+    super(message);
+    this.name = "ServerError";
+    this.response = new Response(null, { status: statusCode });
+  }
+}
+
+class MockServerParseError extends Error implements ServerParseError {
+  response: Response;
+
+  constructor(
+    message: string,
+    public statusCode: number,
+    public bodyText: string,
+  ) {
+    super(message);
+    this.name = "ServerError";
+    this.response = new Response(bodyText, { status: statusCode });
+  }
+}
+
+class MockNetworkError extends Error implements ServerError {
+  response: Response;
+
+  constructor(
+    message: string,
+    public statusCode: number,
+    public result: Record<string, any>,
+  ) {
+    super(message);
+    this.name = "Error";
+    this.response = new Response(null, { status: statusCode });
+  }
+}
+
+export const NETWORK_SERVER_ERROR = new ApolloError({
+  networkError: new MockServerError(
+    "Response not successful: Received status code 400",
+    400,
+    {
       errors: [
         {
           message: 'Cannot query field "WOOT" on type "NimbusExperimentType".',
@@ -21,52 +64,37 @@ export const NETWORK_SERVER_ERROR = {
         },
       ],
     },
-  },
-  message: "Response not successful: Received status code 400",
-};
+  ),
+});
 
-export const NETWORK_SERVER_PARSE_ERROR = {
-  graphQLErrors: [],
-  networkError: {
-    name: "ServerParseError",
-    response: {},
-    statusCode: 404,
-    bodyText:
-      '<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta http-equiv="content-type" content="text/html; charset=utf-8">\n  <title>Page not found at /graphql</title>\n  <meta name="robots" content="NONE,NOARCHIVE">\n  <style type="text/css">\n    html * { padding:0; margin:0; }\n    body * { padding:10px 20px; }\n    body * * { padding:0; }\n    body { font:small sans-serif; background:#eee; color:#000; }\n    body>div { border-bottom:1px solid #ddd; }\n    h1 { font-weight:normal; margin-bottom:.4em; }\n    h1 span { font-size:60%; color:#666; font-weight:normal; }\n    table { border:none; border-collapse: collapse; width:100%; }\n    td, th { vertical-align:top; padding:2px 3px; }\n    th { width:12em; text-align:right; color:#666; padding-right:.5em; }\n    #info { background:#f6f6f6; }\n    #info ol { margin: 0.5em 4em; }\n    #info ol li { font-family: monospace; }\n    #summary { background: #ffc; }\n    #explanation { background:#eee; border-bottom: 0px none; }\n    pre.exception_value { font-family: sans-serif; color: #575757; font-size: 1.5em; margin: 10px 0 10px 0; }\n  </style>\n</head>\n<body>\n  <div id="summary">\n    <h1>Page not found <span>(404)</span></h1>\n    \n    <table class="meta">\n      <tr>\n        <th>Request Method:</th>\n        <td>POST</td>\n      </tr>\n      <tr>\n        <th>Request URL:</th>\n        <td>https://localhost/graphql</td>\n      </tr>\n      \n    </table>\n  </div>\n  <div id="info">\n    \n      <p>\n      Using the URLconf defined in <code>experimenter.urls</code>,\n      Django tried these URL patterns, in this order:\n      </p>\n      <ol>\n        \n          <li>\n            \n                ^media/(?P&lt;path&gt;.*)$\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v1/experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v2/experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v3/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v5/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v6/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^admin/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^nimbus/\n                [name=\'nimbus-list\']\n            \n          </li>\n        \n          <li>\n            \n                ^nimbus/(?P&lt;slug&gt;[\\w-]+)/\n                [name=\'nimbus-detail\']\n            \n          </li>\n        \n          <li>\n            \n                ^$\n                [name=\'home\']\n            \n          </li>\n        \n          <li>\n            \n                ^404/\n                \n            \n          </li>\n        \n      </ol>\n      <p>\n        \n          The current path, <code>graphql</code>,\n        \n        didn’t match any of these.\n      </p>\n    \n  </div>\n\n  <div id="explanation">\n    <p>\n      You’re seeing this error because you have <code>DEBUG = True</code> in\n      your Django settings file. Change that to <code>False</code>, and Django\n      will display a standard 404 page.\n    </p>\n  </div>\n</body>\n</html>\n',
-  },
-  message:
+export const NETWORK_SERVER_PARSE_ERROR = new ApolloError({
+  networkError: new MockServerParseError(
     "JSON.parse: unexpected character at line 1 column 1 of the JSON data",
-};
+    404,
+    '<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta http-equiv="content-type" content="text/html; charset=utf-8">\n  <title>Page not found at /graphql</title>\n  <meta name="robots" content="NONE,NOARCHIVE">\n  <style type="text/css">\n    html * { padding:0; margin:0; }\n    body * { padding:10px 20px; }\n    body * * { padding:0; }\n    body { font:small sans-serif; background:#eee; color:#000; }\n    body>div { border-bottom:1px solid #ddd; }\n    h1 { font-weight:normal; margin-bottom:.4em; }\n    h1 span { font-size:60%; color:#666; font-weight:normal; }\n    table { border:none; border-collapse: collapse; width:100%; }\n    td, th { vertical-align:top; padding:2px 3px; }\n    th { width:12em; text-align:right; color:#666; padding-right:.5em; }\n    #info { background:#f6f6f6; }\n    #info ol { margin: 0.5em 4em; }\n    #info ol li { font-family: monospace; }\n    #summary { background: #ffc; }\n    #explanation { background:#eee; border-bottom: 0px none; }\n    pre.exception_value { font-family: sans-serif; color: #575757; font-size: 1.5em; margin: 10px 0 10px 0; }\n  </style>\n</head>\n<body>\n  <div id="summary">\n    <h1>Page not found <span>(404)</span></h1>\n    \n    <table class="meta">\n      <tr>\n        <th>Request Method:</th>\n        <td>POST</td>\n      </tr>\n      <tr>\n        <th>Request URL:</th>\n        <td>https://localhost/graphql</td>\n      </tr>\n      \n    </table>\n  </div>\n  <div id="info">\n    \n      <p>\n      Using the URLconf defined in <code>experimenter.urls</code>,\n      Django tried these URL patterns, in this order:\n      </p>\n      <ol>\n        \n          <li>\n            \n                ^media/(?P&lt;path&gt;.*)$\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v1/experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v2/experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v3/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v5/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^api/v6/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^admin/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^experiments/\n                \n            \n          </li>\n        \n          <li>\n            \n                ^nimbus/\n                [name=\'nimbus-list\']\n            \n          </li>\n        \n          <li>\n            \n                ^nimbus/(?P&lt;slug&gt;[\\w-]+)/\n                [name=\'nimbus-detail\']\n            \n          </li>\n        \n          <li>\n            \n                ^$\n                [name=\'home\']\n            \n          </li>\n        \n          <li>\n            \n                ^404/\n                \n            \n          </li>\n        \n      </ol>\n      <p>\n        \n          The current path, <code>graphql</code>,\n        \n        didn’t match any of these.\n      </p>\n    \n  </div>\n\n  <div id="explanation">\n    <p>\n      You’re seeing this error because you have <code>DEBUG = True</code> in\n      your Django settings file. Change that to <code>False</code>, and Django\n      will display a standard 404 page.\n    </p>\n  </div>\n</body>\n</html>\n',
+  ),
+});
 
-export const NETWORK_ERROR = {
-  graphQLErrors: [],
-  networkError: {
-    name: "Error",
-    response: {},
-    statusCode: 400,
-    result: {
-      errors: [
-        {
-          message: 'Cannot query field "WOOT" on type "NimbusExperimentType".',
-          locations: [
-            {
-              line: 3,
-              column: 5,
-            },
-          ],
-        },
-      ],
-    },
-  },
-  message: "Response not successful: Received status code 400",
-};
+// export const NETWORK_ERROR = new ApolloError({
+//   networkError: new MockNetworkError(
+//     "Response not successful: Received status code 400",
+//     400,
+//     {
+//       errors: [
+//         {
+//           message: 'Cannot query field "WOOT" on type "NimbusExperimentType".',
+//           locations: [
+//             {
+//               line: 3,
+//               column: 5,
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   ),
+// });
 
-export const GQL_ERROR = {
-  graphQLErrors: [
-    {
-      message: 'Received incompatible instance "WOOT".',
-    },
-  ],
-  networkError: null,
-  message: 'Received incompatible instance "WOOT".',
-};
+export const GQL_ERROR = new ApolloError({
+  graphQLErrors: [new GraphQLError('Received incompatible instance "WOOT".')],
+});