Fix error being thrown while Library loading is canceled

apollographql/apollo-client#4114

Steps to reproduce:

1. Go to Library
2. While it is loading, go to another view

src/Library.tsx

@@ -4,7 +4,7 @@ import { tracksQuery } from './graphql-api'
 import { useQuery } from '@apollo/client'
 import { mapData } from './mappers'
 
-const loadMore = (next, fetchMore) => {
+const loadMore = async (next, fetchMore) => {
 	if (!next) {
 		return
 	}
@@ -15,38 +15,46 @@ const loadMore = (next, fetchMore) => {
 		return
 	}
 
-	fetchMore({
-		variables: {
-			offset,
-		},
-		updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
-			if (!fetchMoreResult) {
-				return previousResult
-			}
-
-			fetchMoreResult.tracks.items = [
-				...previousResult.tracks.items,
-				...fetchMoreResult.tracks.items,
-			]
-
-			return fetchMoreResult
-		},
-	})
+	try {
+		await fetchMore({
+			variables: {
+				offset,
+			},
+			updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
+				if (!fetchMoreResult) {
+					return previousResult
+				}
+
+				fetchMoreResult.tracks.items = [
+					...previousResult.tracks.items,
+					...fetchMoreResult.tracks.items,
+				]
+
+				return fetchMoreResult
+			},
+		})
+	} catch {}
 }
 
 const Library = () => {
-	const { loading, fetchMore, data = { tracks: { items: [], next: '' } } } = useQuery(
-		tracksQuery,
-		{
-			notifyOnNetworkStatusChange: true
-		}
-	)
+	const {
+		loading,
+		fetchMore,
+		data = { tracks: { items: [], next: '' } },
+	} = useQuery(tracksQuery, {
+		notifyOnNetworkStatusChange: true,
+	})
 
 	useEffect(() => {
 		loadMore(data.tracks.next, fetchMore)
 	}, [data.tracks.next, fetchMore, data.tracks.items])
 
-	return <SongList items={mapData(data.tracks)} heading={"Library " + (loading ? '(loading)' : '')} />
+	return (
+		<SongList
+			items={mapData(data.tracks)}
+			heading={'Library ' + (loading ? '(loading)' : '')}
+		/>
+	)
 }
 
 export default Library