Network related crashes (#501)

* downgrade apollo to circumvent bug

Running into this issue:
apollographql/apollo-client#3236

* Fix network error catching

apollographql/react-apollo#604 (comment)
5648596

* fix refetch/fetchmore handlers when null

* make sure errors are passed through on nested HOCs

* improve error handling on profile

* fix linter

* update snapshots

* add audio error handling

package.json

@@ -88,7 +88,8 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "github:xcarpentier/react-native-action-sheet",
     "apollo-cache-inmemory": "^1.1.12",
-    "apollo-client": "^2.2.8",
+    "apollo-client": "2.2.7",
+    "apollo-link": "^1.2.2",
     "apollo-link-context": "^1.0.1",
     "apollo-link-error": "^1.0.7",
     "apollo-link-http": "^1.1.0",
@@ -141,7 +142,7 @@
     "ramda": "^0.25.0",
     "raven-js": "^3.22.2",
     "react": "16.2.0",
-    "react-apollo": "^2.1.3",
+    "react-apollo": "2.1.2",
     "react-dev-utils": "^4.2.1",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.2.0",

src/@data/Client/index.js

@@ -1,4 +1,5 @@
 import { ApolloClient } from 'apollo-client';
+import { ApolloLink } from 'apollo-link';
 
 import authenticationLink from './authenticationLink';
 import httpLink from './httpLink';
@@ -7,11 +8,15 @@ import errorLink from './errorLink';
 
 import cache from './cache';
 
+const link = ApolloLink.from([
+  clientStateLink,
+  authenticationLink,
+  errorLink,
+  httpLink,
+]);
+
 export default new ApolloClient({
-  link: errorLink.concat(
-    clientStateLink.concat(
-      authenticationLink.concat(httpLink),
-    ),
-  ),
+  link,
   cache,
+  queryDeduplication: true,
 });

src/@data/likes/withProfileLikes.js

@@ -16,6 +16,7 @@ export const QUERY = gql`
 
 export default graphql(QUERY, {
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.userFeed && data.userFeed.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/likes/withProfileRecentLikes.js

@@ -16,6 +16,7 @@ export const QUERY = gql`
 
 export default graphql(QUERY, {
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.recentlyLiked && data.recentlyLiked.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/likes/withRecentLikes.js

@@ -16,6 +16,7 @@ export const recentLikesQuery = gql`
 
 export default graphql(recentLikesQuery, {
   props: ({ data } = {}) => ({
+    error: data.error,
     content: data.recentlyLiked && data.recentlyLiked.map(identifyCategory),
     isLoading: data.loading,
     refetch: data.refetch,

src/@data/mediaPlayer/index.js

@@ -58,7 +58,8 @@ const stop = graphql(stopMutation, {
 });
 
 export const withNowPlaying = graphql(mediaPlayerQuery, {
-  props: ({ data: { mediaPlayer } }) => ({
+  props: ({ data: { error, mediaPlayer } }) => ({
+    error,
     nowPlaying: mediaPlayer,
   }),
 });
@@ -82,7 +83,8 @@ export const withPlaylist = graphql(albumQuery, {
       id: ownProps.id,
     },
   }),
-  props: ({ data: { playlist } }) => ({
+  props: ({ data: { error, playlist } }) => ({
+    error,
     content: playlist,
   }),
   skip: ({ id }) => !id,

src/@data/withArticle/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import articleQuery from './articleQuery';
 
 export default graphql(articleQuery, {
-  props: ({ data: { content, loading }, ownProps }) => ({
+  props: ({ data: { error, content, loading }, ownProps }) => ({
+    error: error || ownProps.error,
     content,
     isLoading: ownProps.isLoading || loading,
   }),

src/@data/withArticles/index.js

@@ -11,6 +11,7 @@ export default graphql(articlesQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withCachedContent/index.js

@@ -47,7 +47,8 @@ const cachedContentParentQuery = gql`
 `;
 
 const withQuery = query => graphql(query, {
-  props: ({ data: { content, loading }, ownProps }) => ({
+  props: ({ data: { error, content, loading }, ownProps }) => ({
+    error: error || ownProps.error,
     content: merge({}, (content || {}), (ownProps.content || {})),
     isLoading: ownProps.isLoading || loading,
   }),

src/@data/withCampuses/index.js

@@ -22,6 +22,7 @@ export const QUERY = gql`
 
 export default graphql(QUERY, {
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     campuses: data.campuses,
     isLoading: ownProps.isLoading || data.loading,
   }),

src/@data/withCashTag/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import cashTagQuery from './cashTagQuery';
 
 export default graphql(cashTagQuery, {
-  props: ({ data: { account } }) => ({
+  props: ({ data: { error, account } }) => ({
+    error,
     account,
   }),
   options: (ownProps = {}) => ({

src/@data/withDevotional/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import devotionalQuery from './devotionalQuery';
 
 export default graphql(devotionalQuery, {
-  props: ({ data: { content } }) => ({
+  props: ({ data: { error, content } }) => ({
+    error,
     content,
   }),
   options: (ownProps = {}) => ({

src/@data/withDevotionals/index.js

@@ -11,6 +11,7 @@ export default graphql(devotionalsQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withEvent/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import eventQuery from './eventQuery';
 
 export default graphql(eventQuery, {
-  props: ({ data: { content } }) => ({
+  props: ({ data: { error, content } }) => ({
+    error,
     content,
   }),
   options: (ownProps = {}) => ({

src/@data/withFilterContent/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import filterContentQuery from './filterContentQuery';
 
 export default graphql(filterContentQuery, {
-  props: ({ data: { family } }) => ({
+  props: ({ data: { error, family } }) => ({
+    error,
     family,
   }),
 });

src/@data/withFinancialAccounts/index.js

@@ -3,6 +3,7 @@ import financialAccountsQuery from './financialAccountsQuery';
 
 export default graphql(financialAccountsQuery, {
   props: ({ ownProps, data }) => ({
+    error: data.error || ownProps.error,
     accounts: data.accounts,
     isLoading: ownProps.isLoading || data.loading,
   }),

src/@data/withGeoLocation/index.js

@@ -31,6 +31,7 @@ export default graphql(geoQuery, {
     skip: !(ownProps.origin && ownProps.destinations),
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     geoElements: get(data, 'geolocate.rows[0].elements') || [],
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withGive/withContributions.js

@@ -42,9 +42,10 @@ export const QUERY = gql`
 `;
 
 export default graphql(QUERY, {
-  props({ ownProps, data: { contributions, loading } }) {
+  props({ ownProps, data: { error, contributions, loading } }) {
     if (!contributions) return { contributions, isLoading: ownProps.isLoading || loading };
     return {
+      error: error || ownProps.error,
       isLoading: ownProps.isLoading || loading,
       contributions: {
         ...contributions,

src/@data/withGroupAttributes/index.js

@@ -4,6 +4,7 @@ import groupAttributesQuery from './groupAttributesQuery';
 
 export default graphql(groupAttributesQuery, {
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     groupAttributes: data.groupAttributes,
     isLoading: ownProps.isLoading || data.loading,
   }),

src/@data/withGroupFinderResults/index.js

@@ -26,6 +26,7 @@ const getDay = (schedule) => {
 
 export default graphql(groupsQuery, {
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.content,
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withGroupInfo/index.js

@@ -3,6 +3,7 @@ import groupQuery from './groupQuery';
 
 export default graphql(groupQuery, {
   props: ({ ownProps, data }) => ({
+    error: data.error || ownProps.error,
     group: data.group,
     person: data.person,
     isLoading: ownProps.isLoading || data.loading,

src/@data/withLiveNow/index.js

@@ -12,7 +12,8 @@ export const QUERY = gql`
 `;
 
 export default graphql(QUERY, {
-  props: ({ data: { live = {} } = {} }) => ({
+  props: ({ data: { error, live = {} } = {} }) => ({
+    error,
     isLive: live.live,
     isFuse: live.fuse,
     embedUrl: live.embedUrl,

src/@data/withNewsStories/index.js

@@ -11,6 +11,7 @@ export default graphql(newsStoriesQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withNewsStory/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import newsStoryQuery from './newsStoryQuery';
 
 export default graphql(newsStoryQuery, {
-  props: ({ data: { content, loading }, ownProps }) => ({
+  props: ({ data: { error, content, loading }, ownProps }) => ({
+    error: error || ownProps.error,
     content,
     isLoading: ownProps.isLoading || loading,
   }),

src/@data/withOnboarding/index.js

@@ -28,7 +28,8 @@ export const withShowOnboarding = graphql(showOnboarding, {
 });
 
 const withOnboarding = graphql(query, {
-  props: ({ data: { onboarded, loading }, ownProps = {} }) => ({
+  props: ({ data: { error, onboarded, loading }, ownProps = {} }) => ({
+    error: error || ownProps.error,
     onboarded,
     isLoading: loading || ownProps.isLoading,
   }),

src/@data/withPromotions/index.js

@@ -9,6 +9,7 @@ export default graphql(promotionsQuery, {
     },
   }),
   props: ({ data } = {}) => ({
+    error: data.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: data.loading,
     refetch: data.refetch,

src/@data/withRelatedContent/index.js

@@ -12,8 +12,9 @@ export default graphql(relatedContentQuery, {
       },
     };
   },
-  props({ ownProps, data: { content, loading } } = {}) {
+  props({ ownProps, data: { error, content, loading } } = {}) {
     return {
+      error: error || ownProps.error,
       isLoading: ownProps.isLoading || loading,
       content,
     };

src/@data/withSavedPaymentMethod/withSavedPaymentMethod.js

@@ -16,7 +16,8 @@ export const QUERY = gql`
 `;
 
 export default graphql(QUERY, {
-  props: ({ ownProps, data: { savedPaymentMethod, loading } }) => ({
+  props: ({ ownProps, data: { error, savedPaymentMethod, loading } }) => ({
+    error: error || ownProps.error,
     savedPaymentMethod: {
       ...savedPaymentMethod,
       paymentType: get(savedPaymentMethod, 'payment.paymentType') === 'ACH' ? 'bankAccount' : 'creditCard',

src/@data/withSavedPaymentMethod/withSavedPaymentMethods.js

@@ -15,8 +15,9 @@ export const QUERY = gql`
 `;
 
 export default graphql(QUERY, {
-  props: ({ ownProps, data, data: { savedPaymentMethods, loading } }) => ({
+  props: ({ ownProps, data, data: { error, savedPaymentMethods, loading } }) => ({
     ...data,
+    error: error || ownProps.error,
     savedPaymentMethods: (savedPaymentMethods || []).map(pm => ({
       ...pm,
       paymentMethod: pm.payment.paymentType === 'ACH' ? 'bankAccount' : 'creditCard',

src/@data/withScheduledTransaction/index.js

@@ -62,7 +62,8 @@ export default graphql(QUERY, {
       id: ownProps.id,
     },
   }),
-  props: ({ data: { transaction, loading } }) => ({
+  props: ({ data: { error, transaction, loading } }) => ({
+    error,
     transaction,
     isLoading: loading,
   }),

src/@data/withScheduledTransactions/index.js

@@ -38,7 +38,8 @@ export const QUERY = gql`
 `;
 
 export default graphql(QUERY, {
-  props: ({ data: { schedules } }) => ({
+  props: ({ data: { error, schedules } }) => ({
+    error,
     schedules,
   }),
 });

src/@data/withScripture/index.js

@@ -16,6 +16,7 @@ export default graphql(scriptureQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.scripture,
     isLoading: ownProps.isLoading || data.loading,
   }),

src/@data/withSearch/index.js

@@ -30,11 +30,12 @@ export default graphql(searchQuery, {
       site: ownProps.site || 'https://newspring.cc',
     },
   }),
-  props: ({ data } = {}) => ({
+  props: ({ data, ownProps } = {}) => ({
     content: (data.content && data.content.items) || [],
     total: data.content && data.content.total,
-    isLoading: data.loading,
+    isLoading: data.loading || ownProps.isLoading,
     refetch: data.refetch,
+    error: data.error || ownProps.error,
     fetchMore: fetchMoreResolver({
       collectionName: 'content.items',
       data,

src/@data/withSeries/index.js

@@ -11,6 +11,7 @@ export default graphql(seriesQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,

src/@data/withSeriesContent/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import seriesContentQuery from './seriesContentQuery';
 
 export default graphql(seriesContentQuery, {
-  props: ({ ownProps, data: { content, loading } }) => ({
+  props: ({ ownProps, data: { error, content, loading } }) => ({
+    error: error || ownProps.error,
     content,
     isLoading: ownProps.isLoading || loading,
   }),

src/@data/withSeriesSermon/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import seriesSermonQuery from './seriesSermonQuery';
 
 export default graphql(seriesSermonQuery, {
-  props: ({ data: { content } }) => ({
+  props: ({ data: { error, content } }) => ({
+    error,
     content,
   }),
   options: (ownProps = {}) => ({

src/@data/withSermon/index.js

@@ -2,7 +2,8 @@ import { graphql } from 'react-apollo';
 import sermonQuery from './sermonQuery';
 
 export default graphql(sermonQuery, {
-  props: ({ data: { content, loading } }) => ({
+  props: ({ data: { error, content, loading } }) => ({
+    error,
     content,
     isLoading: loading,
   }),

src/@data/withStories/index.js

@@ -11,6 +11,7 @@ export default graphql(storiesQuery, {
     },
   }),
   props: ({ ownProps, data } = {}) => ({
+    error: data.error || ownProps.error,
     content: data.content && data.content.map(identifyCategory),
     isLoading: ownProps.isLoading || data.loading,
     refetch: data.refetch,