Better data fetching error handling for Apollo examples (#2227)

* Display data fetching errors in Apollo examples.

* Prevent Apollo GraphQL errors from crashing SSR.

Also tidied a few comments in the vicinity.

examples/with-apollo-and-redux/components/ErrorMessage.js

@@ -0,0 +1,13 @@
+export default ({message}) => (
+  <aside>
+    {message}
+    <style jsx>{`
+      aside {
+        padding: 1.5em;
+        font-size: 14px;
+        color: white;
+        background-color: red;
+      }
+    `}</style>
+  </aside>
+)

examples/with-apollo-and-redux/components/PostList.js

@@ -1,9 +1,11 @@
 import { gql, graphql } from 'react-apollo'
+import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
 
 const POSTS_PER_PAGE = 10
 
-function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
+function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
+  if (error) return <ErrorMessage message='Error loading posts.' />
   if (allPosts && allPosts.length) {
     const areMorePosts = allPosts.length < _allPostsMeta.count
     return (

examples/with-apollo-and-redux/lib/withData.js

@@ -25,23 +25,28 @@ export default ComposedComponent => {
         composedInitialProps = await ComposedComponent.getInitialProps(ctx)
       }
 
-      // Run all graphql queries in the component tree
+      // Run all GraphQL queries in the component tree
       // and extract the resulting data
       if (!process.browser) {
         const apollo = initApollo()
         const redux = initRedux(apollo)
-        // Provide the `url` prop data in case a graphql query uses it
+        // Provide the `url` prop data in case a GraphQL query uses it
         const url = {query: ctx.query, pathname: ctx.pathname}
 
-        // Run all graphql queries
+        try {
-        const app = (
+          // Run all GraphQL queries
-          // No need to use the Redux Provider
+          await getDataFromTree(
-          // because Apollo sets up the store for us
+            // No need to use the Redux Provider
-          <ApolloProvider client={apollo} store={redux}>
+            // because Apollo sets up the store for us
-            <ComposedComponent url={url} {...composedInitialProps} />
+            <ApolloProvider client={apollo} store={redux}>
-          </ApolloProvider>
+              <ComposedComponent url={url} {...composedInitialProps} />
-        )
+            </ApolloProvider>
-        await getDataFromTree(app)
+          )
+        } catch (error) {
+          // Prevent Apollo Client GraphQL errors from crashing SSR.
+          // Handle them in components via the data.error prop:
+          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+        }
 
         // Extract query data from the store
         const state = redux.getState()
@@ -49,7 +54,7 @@ export default ComposedComponent => {
         // No need to include other initial Redux state because when it
         // initialises on the client-side it'll create it again anyway
         serverState = {
-          apollo: { // Make sure to only include Apollo's data state
+          apollo: { // Only include the Apollo data state
             data: state.apollo.data
           }
         }

examples/with-apollo/components/ErrorMessage.js

@@ -0,0 +1,13 @@
+export default ({message}) => (
+  <aside>
+    {message}
+    <style jsx>{`
+      aside {
+        padding: 1.5em;
+        font-size: 14px;
+        color: white;
+        background-color: red;
+      }
+    `}</style>
+  </aside>
+)

examples/with-apollo/components/PostList.js

@@ -1,9 +1,11 @@
 import { gql, graphql } from 'react-apollo'
+import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
 
 const POSTS_PER_PAGE = 10
 
-function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
+function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
+  if (error) return <ErrorMessage message='Error loading posts.' />
   if (allPosts && allPosts.length) {
     const areMorePosts = allPosts.length < _allPostsMeta.count
     return (

examples/with-apollo/lib/withData.js

@@ -24,26 +24,32 @@ export default ComposedComponent => {
         composedInitialProps = await ComposedComponent.getInitialProps(ctx)
       }
 
-      // Run all graphql queries in the component tree
+      // Run all GraphQL queries in the component tree
       // and extract the resulting data
       if (!process.browser) {
         const apollo = initApollo()
-        // Provide the `url` prop data in case a graphql query uses it
+        // Provide the `url` prop data in case a GraphQL query uses it
         const url = {query: ctx.query, pathname: ctx.pathname}
 
-        // Run all graphql queries
+        try {
-        const app = (
+          // Run all GraphQL queries
-          <ApolloProvider client={apollo}>
+          await getDataFromTree(
-            <ComposedComponent url={url} {...composedInitialProps} />
+            <ApolloProvider client={apollo}>
-          </ApolloProvider>
+              <ComposedComponent url={url} {...composedInitialProps} />
-        )
+            </ApolloProvider>
-        await getDataFromTree(app)
+          )
+        } catch (error) {
+          // Prevent Apollo Client GraphQL errors from crashing SSR.
+          // Handle them in components via the data.error prop:
+          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+        }
 
-        // Extract query data from the Apollo's store
+        // Extract query data from the Apollo store
         const state = apollo.getInitialState()
 
         serverState = {
-          apollo: { // Make sure to only include Apollo's data state
+          apollo: {
+            // Only include the Apollo data state
             data: state.data
           }
         }