Merge branch 'master' into tests

src/components/App.tsx

@@ -25,7 +25,9 @@ export const QUERY_ARTISTS = gql`
 
 export default function App() {
 	const [inputValue, setInputValue] = useState('');
-	const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
+	const [getArtists, { data, error }] = useLazyQuery(
+		QUERY_ARTISTS,
+	);
 	const [artists, setArtists] = useState<Artists>([]);
 	const [suggestions, setSuggestions] = useState<string[]>([]);
 	const [selected, setSelected] = useState(false);
@@ -86,7 +88,7 @@ export default function App() {
 	};
 
 	useEffect(() => {
-		if (data && data.queryArtists !== []) {
+		if (data && data.queryArtists && data.queryArtists !== []) {
 			// Limit artists to 5
 			const updatedArtists = data.queryArtists.slice(0, 5);
 			const updatedSuggestions: string[] = updatedArtists.map(
@@ -98,6 +100,18 @@ export default function App() {
 		}
 	}, [data]);
 
+	// Create flag to filter "No search query" errors
+	let errorNoSearchQuery = false;
+	if (error && error.graphQLErrors) {
+		error.graphQLErrors.forEach((error) => {
+			if (error.message === 'Error: 400: No search query') {
+				errorNoSearchQuery = true;
+			} else {
+				errorNoSearchQuery = false;
+			}
+		});
+	}
+
 	return (
 		<Grommet theme={theme}>
 			<Header />
@@ -110,6 +124,13 @@ export default function App() {
 			{selected && (
 				<Results artists={artists} handleClick={handleClick} />
 			)}
+			{error && !errorNoSearchQuery && (
+				<pre>
+					{error.graphQLErrors.map(({ message }, i) => (
+						<span key={i}>{message}</span>
+					))}
+				</pre>
+			)}
 		</Grommet>
 	);
 }