import React from 'react';
2
import { useLazyQuery } from '@apollo/client';
3
4
function DelayedQuery() {
5
const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);
6
7
if (loading) return <p>Loading ...</p>;
8
if (error) return `Error! ${error}`;
9
10
return (
11
<div>
12
{data?.dog && <img src={data.dog.displayImage} />}
13
<button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
14
Click me!
15
</button>
16
</div>
17
);
18
}