feat: notify apollo error on screen.

.vscode/settings.json

@@ -3,6 +3,7 @@
     "Formik",
     "clsx",
     "fontsource",
+    "notistack",
     "vditor"
   ]
 }

src/commits/commit-list.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@apollo/client';
+import { Link, useResponse } from '@curi/react-dom';
 import { faPlayCircle, faVial } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CircularProgress, Collapse, IconButton, LinearProgress, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, makeStyles, useTheme } from '@material-ui/core';
@@ -37,11 +38,13 @@ export const CommitList: FC<Props> = ({pipeline}) => {
           return <LinearProgress color="secondary" />;
         }
 
-        return <List>
+        return (
-          {data?.commits.map(commit => (
+          <List>
+            {data?.commits.map((commit) => (
                 <Item key={commit.hash} commit={commit} />
             ))}
-        </List>;
+          </List>
+        );
       })()}
     </section>
   )
@@ -50,6 +53,8 @@ export const CommitList: FC<Props> = ({pipeline}) => {
 const Item: FC<{commit: Commit}> = ({commit}) => {
   const [isOpen, setOpen] = useState(() => false);
   const classes = useStyles();
+
+  const {response} = useResponse();
   return (
     <Fragment>
       <ListItem button onClick={() => setOpen(!isOpen)}>
@@ -74,9 +79,15 @@ const Item: FC<{commit: Commit}> = ({commit}) => {
       </ListItem>
       <Collapse in={isOpen} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          {
+          {commit.tasks.map((task) => (
-            commit.tasks.map(task => (<TaskItem key={task.id} task={task} />))
+            <Link
-          }
+              key={task.id}
+              name="pipeline-task-detail"
+              params={{ ...response.params, taskId: task.id }}
+            >
+              <TaskItem task={task} />
+            </Link>
+          ))}
         </List>
       </Collapse>
     </Fragment>

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;

src/index.tsx

@@ -4,48 +4,30 @@ import "./index.css";
 import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { createApolloClient } from "./commons/graphql/client";
+import { FennecApolloClientProvider } from "./commons/graphql/client";
-import { ApolloProvider } from "@apollo/client";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
 import zhLocale from "date-fns/locale/zh-CN";
-import { createRouterComponent } from "@curi/react-dom";
+import { ConfirmProvider } from "material-ui-confirm";
-import { createRouter, announce } from "@curi/router";
+import { SnackbarProvider } from "notistack";
-import { browser } from "@hickory/browser";
+import Router from './commons/route/router';
-import routes from "./routes";
-import { ConfirmProvider } from 'material-ui-confirm';
-import { SnackbarProvider } from 'notistack';
 
-const client = createApolloClient();
-
-const router = createRouter(browser, routes, {
-  sideEffects: [
-    announce(({ response }) => {
-      return `Navigated to ${response.location.pathname}`;
-    }),
-  ],
-  external: { client }
-});
-const Router = createRouterComponent(router);
-
-router.once(() => {
   ReactDOM.render(
     <React.StrictMode>
       <ConfirmProvider>
         <SnackbarProvider maxSnack={5}>
-          <ApolloProvider client={client}>
+          <FennecApolloClientProvider>
             <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
               <Router>
                 <App />
               </Router>
             </MuiPickersUtilsProvider>
-          </ApolloProvider>
+          </FennecApolloClientProvider>
         </SnackbarProvider>
       </ConfirmProvider>
     </React.StrictMode>,
     document.getElementById("root")
   );
-});
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/pipeline-tasks/pipeline-task-detail.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react'
+
+interface Props {
+  taskId: string;
+}
+
+export const PipelineTaskDetail: FC<Props> = ({taskId}) => {
+  return <div>{taskId} detail</div>
+}

src/routes.tsx

@@ -3,11 +3,10 @@ import { prepareRoutes } from "@curi/router";
 import { omit } from 'ramda';
 import React from 'react';
 import { CreateProjectInput, Pipeline, Project } from './generated/graphql';
-import { PipelineDetail } from './pipelines';
 import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
 import { COMMIT_LIST_QUERY } from './commons/graphql/queries';
 import { CommitList } from './commits/commit-list';
-import { COMMITS } from './commits/queries';
+import { PipelineTaskDetail } from './pipeline-tasks/pipeline-task-detail';
 
 export default prepareRoutes([
   {
@@ -93,9 +92,36 @@ export default prepareRoutes([
           return {
             body: () => (
               <ProjectDetail project={omit(["__typename"], data.project)}>
-                <CommitList
+                <CommitList pipeline={omit(["__typename"], data.pipeline)} />
-                  pipeline={omit(["__typename"], data.pipeline)}
+              </ProjectDetail>
-                />
+            ),
+          };
+        },
+        respond({ resolved, error }) {
+          return resolved || <div>Failed</div>;
+        },
+      },
+      {
+        name: "pipeline-task-detail",
+        path: "pipelines/:pipelineId/tasks/:taskId",
+        async resolve(
+          matched,
+          { client }: { client: ApolloClient<InMemoryCache> }
+        ) {
+          const { data } = await client.query<{
+            pipeline: Pipeline;
+            project: Project;
+          }>({
+            query: COMMIT_LIST_QUERY,
+            variables: {
+              projectId: matched?.params.projectId,
+              pipelineId: matched?.params.pipelineId,
+            },
+          });
+          return {
+            body: () => (
+              <ProjectDetail project={omit(["__typename"], data.project)}>
+                <PipelineTaskDetail taskId={matched?.params.taskId} />
               </ProjectDetail>
             ),
           };