04-Apollo Client Error Handling in React

Author: rwieruch

package-lock.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "apollo-cache-inmemory": "^1.3.6",
     "apollo-client": "^2.4.3",
+    "apollo-link": "^1.2.3",
+    "apollo-link-error": "^1.1.1",
     "apollo-link-http": "^1.5.5",
     "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",

package.json

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './style.css';
+
+const ErrorMessage = ({ error }) => (
+  <div className="ErrorMessage">
+    <small>{error.toString()}</small>
+  </div>
+);
+
+export default ErrorMessage;

src/Error/index.js

@@ -4,6 +4,7 @@ import { Query } from 'react-apollo';
 
 import RepositoryList from '../Repository';
 import Loading from '../Loading';
+import ErrorMessage from '../Error';
 
 const GET_REPOSITORIES_OF_CURRENT_USER = gql`
   {
@@ -42,7 +43,11 @@ const GET_REPOSITORIES_OF_CURRENT_USER = gql`
 
 const Profile = () => (
   <Query query={GET_REPOSITORIES_OF_CURRENT_USER}>
-    {({ data, loading }) => {
+    {({ data, loading, error }) => {
+      if (error) {
+        return <ErrorMessage error={error} />;
+      }
+
       const { viewer } = data;
 
       if (loading || !viewer) {

src/Profile/index.js

@@ -2,7 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import { ApolloClient } from 'apollo-client';
+import { ApolloLink } from 'apollo-link';
 import { HttpLink } from 'apollo-link-http';
+import { onError } from 'apollo-link-error';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 
 import * as serviceWorker from './serviceWorker';
@@ -21,10 +23,26 @@ const httpLink = new HttpLink({
   },
 });
 
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.map(({ message, locations, path }) =>
+      console.log(
+        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
+      ),
+    );
+  }
+
+  if (networkError) {
+    console.log(`[Network error]: ${networkError}`);
+  }
+});
+
+const link = ApolloLink.from([errorLink, httpLink]);
+
 const cache = new InMemoryCache();
 
 const client = new ApolloClient({
-  link: httpLink,
+  link,
   cache,
 });