change fetchPolicy to avoid getting stuck on load bar as per apollographql/react-apollo#2899

Author: thiennamdinh

application/src/Pages/Donation/index.js

@@ -207,7 +207,7 @@ class Donation extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY} 
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/Event/index.js

@@ -293,7 +293,7 @@ class Event extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/News/index.js

@@ -192,7 +192,7 @@ class News extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/Nonprofit/index.js

@@ -237,7 +237,7 @@ class Nonprofit extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/Person/index.js

@@ -221,7 +221,7 @@ class Person extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY}
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/Transaction/index.js

@@ -208,7 +208,7 @@ class Transaction extends Component {
 
 	return (
 	    <Query
-		fetchPolicy="network-only"
+		fetchPolicy="no-cache"
 		query={QUERY} 
 		variables={{ id, self: context.userID }}
 	    >

application/src/Pages/TransactionList/index.js

@@ -106,7 +106,7 @@ class TransactionList extends Component {
 	    <Typography variant="body2" className={classes.label}>
 	      {`${node.user.name}`}
 	      {<ToIcon className={classes.toIcon} />}
-	      {`${node.target.name}`}
+	      {node.target.name}
 	    </Typography>
 	);
     }

application/src/Pages/__Common__/QueryHelper/index.js

@@ -33,6 +33,12 @@ const styles = theme => ({
 	color: theme.palette.tertiary.main,
 	textAlign: 'center',
     },
+    empty: {
+	margin: '0 auto',
+	fontWeight: 'bold',
+	color: theme.palette.tertiary.main,
+	textAlign: 'center',
+    },
 
 })
 
@@ -72,7 +78,7 @@ class QueryHelper extends Component {
 		<div>
 		  {dataOld && make(dataOld)}
 		  <Query
-		      fetchPolicy="network-only"
+		      fetchPolicy="no-cache"
 		      query={query}
 		      variables={variables}
 		      partialRefetch={true}
@@ -84,29 +90,45 @@ class QueryHelper extends Component {
 			let dataCurrent = dataOld.concat(data[Object.keys(data)[0]].edges)
 
 			return (
-			    <InfiniteScroll
-				pageStart={0}
-				className={classes.infiniteScroll}
-				loadMore={() => this.paginate(dataCurrent)}
-				hasMore={(dataCurrent.length > dataOld.length) || data[Object.keys(data)[0]].pageInfo.hasNextPage}
-				loader={
-				    <Typography type="body2" className={classes.loader}>
-				      Loading more results...
-				    </Typography>
-				}
-			    />
+			    <div>
+			      <InfiniteScroll
+				  pageStart={0}
+				  className={classes.infiniteScroll}
+				  loadMore={() => this.paginate(dataCurrent)}
+				  hasMore={(dataCurrent.length > dataOld.length) || data[Object.keys(data)[0]].pageInfo.hasNextPage}
+				  loader={
+				      <Typography type="body2" className={classes.loader}>
+					Loading more results...
+				      </Typography>
+				  }
+			      />
+			      {
+				  (dataCurrent.length === 0) &&
+				  <Typography type="body2" className={classes.empty}>
+				    Nothing to see here
+				  </Typography>
+			      }
+			    </div>
 			)
 		    }}
 		  </Query>
 		</div>
 	    );
 	} else {
 	    return (
-		<Query fetchPolicy="network-only" query={query} variables={variables}>
+		<Query fetchPolicy="no-cache" query={query} variables={variables}>
 		  {({ loading, error, data }) => {
 		      if (loading) return <LinearProgress className={classes.progress} />;
 		      if (error) return `Error! ${error.message}`;
-		      return make(data[Object.keys(data)[0]].edges)
+		      if (data[Object.keys(data)[0]].edges.length > 0) {
+			  return make(data[Object.keys(data)[0]].edges)
+		      } else {
+			  return (
+			      <Typography type="body2" className={classes.empty}>
+				Nothing to see here
+			      </Typography>
+			  );
+		      }
 		  }}
 		</Query>
 	    );