add error link to apollo

package.json

@@ -15,7 +15,7 @@
     "apollo-cache": "^1.3.4",
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.13",
+    "apollo-link": "^1.2.14",
     "apollo-link-error": "^1.1.12",
     "apollo-link-http": "^1.5.16",
     "apollo-server-express": "^2.10.1",

packages/@vulcan/core/apolloClient.ts

@@ -1,18 +1,28 @@
-import { ApolloClient } from 'apollo-client'
-import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'
-import { HttpLink } from 'apollo-link-http'
-import fetch from 'isomorphic-unfetch'
+import { ApolloClient } from "apollo-client";
+import { InMemoryCache, NormalizedCacheObject } from "apollo-cache-inmemory";
+import { HttpLink } from "apollo-link-http";
+import { ApolloLink } from "apollo-link";
+import errorLink from "./links/error";
+import fetch from "isomorphic-unfetch";
 
-export default function createApolloClient(graphqlUrl: string, initialState: NormalizedCacheObject, ctx: Object) {
+export default function createApolloClient(
+  graphqlUrl: string,
+  initialState: NormalizedCacheObject,
+  ctx: Object
+) {
   // The `ctx` (NextPageContext) will only be present on the server.
   // use it to extract auth headers (ctx.req) or similar.
   return new ApolloClient({
+    name: "default-client",
     ssrMode: Boolean(ctx),
-    link: new HttpLink({
-      uri: graphqlUrl, // Server URL (must be absolute)
-      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
-      fetch,
-    }),
+    link: ApolloLink.from([
+      errorLink,
+      new HttpLink({
+        uri: graphqlUrl, // Server URL (must be absolute)
+        credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
+        fetch,
+      }),
+    ]),
     cache: new InMemoryCache().restore(initialState),
-  })
+  });
 }

packages/@vulcan/core/links/error.ts

@@ -0,0 +1,24 @@
+import { onError } from "apollo-link-error";
+import { GraphQLError } from "graphql";
+
+const locationsToStr = (locations: GraphQLError["locations"] = []) =>
+  locations.map(({ column, line }) => `line ${line}, col ${column}`).join(";");
+
+const errorLink = onError((error) => {
+  const { graphQLErrors, networkError } = error;
+  if (graphQLErrors)
+    graphQLErrors.forEach(({ message, locations, path }) => {
+      // eslint-disable-next-line no-console
+      console.log(
+        `[GraphQL error]: Message: ${message}, Location: ${locationsToStr(
+          locations
+        )}, Path: ${path}`
+      );
+    });
+  if (networkError) {
+    // eslint-disable-next-line no-console
+    console.log(`[Network error]: ${networkError}`);
+  }
+});
+
+export default errorLink;

pages/index.js → pages/index.tsx

@@ -1,12 +1,9 @@
-import {
-  useQuery,
-  useMutation
-} from '@apollo/react-hooks'
-import gql from 'graphql-tag'
-import { useForm } from 'react-hook-form'
+import { useQuery /*, useMutation*/ } from "@apollo/react-hooks";
+import gql from "graphql-tag";
+//import { useForm } from "react-hook-form";
 
 const Home = () => {
-  const siteDataQuery = gql`
+  const vulcanSiteDataQuery = gql`
     query getSiteData {
       SiteData {
         url
@@ -17,8 +14,24 @@ const Home = () => {
     }
   `;
 
-  const { data } = useQuery(siteDataQuery)
+  const { data, loading, error, client } = useQuery(vulcanSiteDataQuery);
 
+  let content;
+  if (loading) {
+    content = `Connecting to your graphQL backend...`; // on ${client.name}`
+  } else if (error) {
+    if (error.networkError?.message === "Failed to fetch") {
+      content = `No graphQL backend is running.`;
+    } else {
+      content = `Couldn't connect to your graphQL backend (${error}).`;
+    }
+  } else if (data) {
+    content = `Successfully connected to your graphQL backend.\n Data: ${JSON.stringify(
+      data,
+      null,
+      4
+    )}`;
+  }
   // const { error, data } = useQuery(gql`
   //   query current {
   //     currentUser {
@@ -59,7 +72,7 @@ const Home = () => {
   return (
     <div className="container">
       <main>
-        {JSON.stringify(data)}
+        {content}
 
         {/* {!!error && (
           <div>
@@ -102,7 +115,7 @@ const Home = () => {
         } */}
       </main>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;