Add server error display

src/components/App.tsx

@@ -25,7 +25,10 @@ const QUERY_ARTISTS = gql`
 
 export default function App() {
 	const [inputValue, setInputValue] = useState('');
-	const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
+	const [
+		getArtists,
+		{ data, error, loading, variables },
+	] = useLazyQuery(QUERY_ARTISTS);
 	const [artists, setArtists] = useState<Artists>([]);
 	const [suggestions, setSuggestions] = useState<string[]>([]);
 	const [selected, setSelected] = useState(false);
@@ -86,7 +89,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 +101,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 +125,15 @@ export default function App() {
 			{selected && (
 				<Results artists={artists} handleClick={handleClick} />
 			)}
+			{error && !errorNoSearchQuery && (
+				<div style={{maxWidth: '400px', margin: '0' }}>
+					<pre>
+						{error.graphQLErrors.map(({ message }, i) => (
+							<span key={i}>{message}</span>
+						))}
+					</pre>
+				</div>
+			)}
 		</Grommet>
 	);
 }