Add server error display
This commit is contained in:
parent
6af8d5db92
commit
cfbbcf828a
@ -25,7 +25,10 @@ const QUERY_ARTISTS = gql`
|
|||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [inputValue, setInputValue] = useState('');
|
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 [artists, setArtists] = useState<Artists>([]);
|
||||||
const [suggestions, setSuggestions] = useState<string[]>([]);
|
const [suggestions, setSuggestions] = useState<string[]>([]);
|
||||||
const [selected, setSelected] = useState(false);
|
const [selected, setSelected] = useState(false);
|
||||||
@ -86,7 +89,7 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data && data.queryArtists !== []) {
|
if (data && data.queryArtists && data.queryArtists !== []) {
|
||||||
// Limit artists to 5
|
// Limit artists to 5
|
||||||
const updatedArtists = data.queryArtists.slice(0, 5);
|
const updatedArtists = data.queryArtists.slice(0, 5);
|
||||||
const updatedSuggestions: string[] = updatedArtists.map(
|
const updatedSuggestions: string[] = updatedArtists.map(
|
||||||
@ -98,6 +101,18 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
}, [data]);
|
}, [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 (
|
return (
|
||||||
<Grommet theme={theme}>
|
<Grommet theme={theme}>
|
||||||
<Header />
|
<Header />
|
||||||
@ -110,6 +125,15 @@ export default function App() {
|
|||||||
{selected && (
|
{selected && (
|
||||||
<Results artists={artists} handleClick={handleClick} />
|
<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>
|
</Grommet>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user