feat(apollo): 接口报错时，界面提供反馈。

src/components/app.tsx

@@ -7,11 +7,9 @@ import { useObserver } from 'mobx-react';
 import { appStore } from '../app.store';
 import Router, { Route } from 'preact-router';
 import { ProjectDetails } from '../routes/projects/project-details';
+import { createApolloClient } from '../units/apollo-client';
 
-const client = new ApolloClient({
+const client = createApolloClient();
-  uri: '/api/graphql',
-  cache: new InMemoryCache()
-});
 
 const App: FunctionalComponent = () => {
   return (

src/units/apollo-client.ts

@@ -0,0 +1,25 @@
+import { Message } from './../components/commons/message/index';
+import { ApolloClient, concat, HttpLink, InMemoryCache } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
+export function createApolloClient() {
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      console.error(graphQLErrors);
+      graphQLErrors.forEach(({ message, locations, path }) => {
+        console.log(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        );
+      });
+    }
+    if (networkError) console.log(`[Network error]: ${networkError}`);
+  });
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: concat(
+      errorLink,
+      new HttpLink({
+        uri: '/api/graphql'
+      })
+    )
+  });
+}