Update to single query model and update typing

src/components/SearchBox.tsx

@@ -4,24 +4,35 @@ import { Box, TextInput } from 'grommet';
 import { FormSearch } from 'grommet-icons';
 import { debounce } from 'lodash';
 
-const SEARCH_ARTIST = gql`
+import { Artists, Artist } from '../interfaces';
+
+const QUERY_ARTIST_ALBUMS = gql`
 	query Artist($byName: String!) {
 		queryArtists(byName: $byName) {
 			name
+			image
+			id
+			albums {
+				name
+				image
+				id
+			}
 		}
 	}
 `;
 
 export const SearchBox = () => {
 	const [value, setValue] = useState('');
-	const [getArtist, { loading, data }] = useLazyQuery(SEARCH_ARTIST);
+	const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS);
-	const [suggestions, setSuggestions] = useState(['']);
+	const [artists, setArtists] = useState<Artists | undefined>(undefined);
-	// TODO: Find a solution to have suggestions not showing when empty
+	const [suggestions, setSuggestions] = useState<string[] | undefined>(
+		undefined,
+	);
 
 	// Debounce the database query, based on the following article:
 	// https://dev.to/reflexgravity/use-lodash-debouce-inside-a-functional-component-in-react-4g5j
 	const updateQuery = () => {
-		getArtist({ variables: { byName: value } });
+		getArtists({ variables: { byName: value } });
 	};
 
 	const delayedQuery = useCallback(debounce(updateQuery, 500), [value]);
@@ -30,6 +41,7 @@ export const SearchBox = () => {
 		setValue(e.target.value);
 	};
 
+	// TODO: Maybe merge the two use effects?
 	useEffect(() => {
 		delayedQuery();
 
@@ -38,15 +50,16 @@ export const SearchBox = () => {
 	}, [value, delayedQuery]);
 
 	useEffect(() => {
-		// TODO: Maybe merge the two use effects?
+		if (data && data.queryArtists !== []) {
-		if (data) {
+			// Limit artists to 5
-			const mapSuggestions: string[] = data.queryArtists.map(
+			const updatedArtists = data.queryArtists.slice(0, 5);
-				(el: { name: string }) => {
+			const updatedSuggestions: string[] = updatedArtists.map(
+				(el: Artist) => {
 					return el.name;
 				},
 			);
-			const updatedSuggestions = mapSuggestions.slice(0, 5);
 			setSuggestions(updatedSuggestions);
+			setArtists(updatedArtists);
 		}
 	}, [data]);
 
@@ -63,7 +76,7 @@ export const SearchBox = () => {
 				placeholder='Type an artist name'
 				icon={<FormSearch color='plain' />}
 				dropHeight='large'
-				suggestions= {suggestions}
+				suggestions={suggestions}
 			/>
 		</Box>
 	);

src/interfaces/index.ts

@@ -0,0 +1,14 @@
+export interface Album {
+	name: string;
+	image: string;
+	id: string;
+}
+
+export interface Artist {
+	name: string;
+	image: string;
+	id: string;
+	albums: Album[];
+}
+
+export type Artists = Artist[];