uselazyquery

1const GET_DOG_PHOTO = gql`
2  query Dog($breed: String!) {
3    dog(breed: $breed) {
4      id
5      displayImage
6    }
7  }
8`;
9
10function DogPhoto({ breed }) {
11  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
12    variables: { breed },
13  });
14
15  if (loading) return null;
16  if (error) return `Error! ${error}`;
17
18  return (
19    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
20  );
21}

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

1const { data: cachedData } = useQuery(MyQuery, { fetchPolicy: 'cache-only', variables });
2const [executeMyQuery, { data: queryData, loading, error }] = useLazyQuery(MyQuery, {
3  fetchPolicy: 'network-only'
4});
5const data = queryData || cachedData;
6