feat: notify apollo error on screen.

src/commons/graphql/client.ts

@@ -1,29 +0,0 @@
-import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from "@apollo/client";
-import { withScalars } from 'apollo-link-scalars';
-import { buildClientSchema, IntrospectionQuery } from 'graphql';
-import { DateTimeResolver } from 'graphql-scalars';
-import introspectionResult from "../../generated/graphql.schema.json";
-
-const schema = buildClientSchema(
-  (introspectionResult as unknown) as IntrospectionQuery
-);
-
-const httpLink = new HttpLink({
-  uri: "/api/graphql",
-});
-
-const typesMap = {
-  DateTime: DateTimeResolver,
-};
-const link = ApolloLink.from([
-  (withScalars({ schema, typesMap }) as unknown) as ApolloLink,
-  httpLink,
-]);
-
-export function createApolloClient() {
-  return new ApolloClient({
-    ssrMode: typeof window === "undefined",
-    link,
-    cache: new InMemoryCache(),
-  });
-}

src/commons/graphql/client.tsx

@@ -0,0 +1,83 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  HttpLink,
+  InMemoryCache,
+  split,
+  ApolloProvider,
+} from "@apollo/client";
+import { withScalars } from "apollo-link-scalars";
+import { buildClientSchema, IntrospectionQuery } from "graphql";
+import { DateTimeResolver } from "graphql-scalars";
+import { FC } from "react";
+import introspectionResult from "../../generated/graphql.schema.json";
+import { onError } from "@apollo/client/link/error";
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { getMainDefinition } from "@apollo/client/utilities";
+import { useSnackbar } from "notistack";
+
+const schema = buildClientSchema(
+  (introspectionResult as unknown) as IntrospectionQuery
+);
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};
+
+export const FennecApolloClientProvider: FC = ({ children }) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach((error) => {
+        enqueueSnackbar(error.message, {
+          variant: "error",
+        });
+      });
+      graphQLErrors.forEach(({ message, locations, path }) => {
+        console.error(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        );
+      });
+    }
+    if (networkError) {
+      console.log(`[Network error]: ${networkError}`);
+      enqueueSnackbar(networkError.message, {
+        variant: "error",
+      });
+    }
+  });
+  const wsLink = new WebSocketLink({
+    uri: `${window.location.protocol.replace("http", "ws")}//${
+      window.location.hostname
+    }:${window.location.port}/api/graphql`,
+    options: {
+      reconnect: true,
+    },
+  });
+  const httpLink = new HttpLink({
+    uri: "/api/graphql",
+  });
+  const splitLink = split(
+    ({ query }) => {
+      const definition = getMainDefinition(query);
+      return (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      );
+    },
+    wsLink,
+    httpLink
+  );
+  const link = ApolloLink.from([
+    errorLink,
+    (withScalars({ schema, typesMap }) as unknown) as ApolloLink,
+    splitLink,
+  ]);
+  const client = new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link,
+    cache: new InMemoryCache(),
+  });
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};

src/commons/route/router.tsx

@@ -0,0 +1,31 @@
+import { useApolloClient } from "@apollo/client";
+import { createRouterComponent } from "@curi/react-dom";
+import { createRouter, announce } from "@curi/router";
+import { browser } from "@hickory/browser";
+import { FC, ReactNode, useEffect, useMemo, useState } from "react";
+import routes from "../../routes";
+import { LinearProgress } from "@material-ui/core";
+
+const Component: FC = ({ children }) => {
+  const client = useApolloClient();
+  const [body, setBody] = useState<any>(null);
+
+  useEffect(() => {
+    const router = createRouter(browser, routes, {
+      sideEffects: [
+        announce(({ response }) => {
+          return `Navigated to ${response.location.pathname}`;
+        }),
+      ],
+      external: { client },
+    });
+    const Router = createRouterComponent(router);
+    router.once(() => {
+      setBody(<Router>{children}</Router>);
+    });
+  }, [setBody, client, children]);
+
+  return body ?? <LinearProgress />;
+};
+
+export default Component;