查询

1
import { gql, useQuery } from '@apollo/client';
2

3
const GET_DOGS = gql`
4
  query GetDogs {
5
    dogs {
6
      id
7
      breed
8
    }
9
  }
10
`;

1
function Dogs({ onDogSelected }) {
2
  const { loading, error, data } = useQuery(GET_DOGS);
3

4
  if (loading) return 'Loading...';
5
  if (error) return `Error! ${error.message}`;
6

7
  return (
8
    <select name='dog' onChange={onDogSelected}>
9
      {data.dogs.map((dog) => (
10
        <option key={dog.id} value={dog.breed}>
11
          {dog.breed}
12
        </option>
13
      ))}
14
    </select>
15
  );
16
}

1
const GET_DOG_PHOTO = gql`
2
  query Dog($breed: String!) {
3
    dog(breed: $breed) {
4
      id
5
      displayImage
6
    }
7
  }
8
`;
9

10
function 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
}

1
function DogPhoto({ breed }) {
2
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
3
    variables: { breed },
4
    pollInterval: 500,
5
  });
6

7
  if (loading) return null;
8
  if (error) return `Error! ${error}`;
9

10
  return (
11
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
12
  );
13
}

1
function DogPhoto({ breed }) {
2
  const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
3
    variables: { breed },
4
  });
5

6
  if (loading) return null;
7
  if (error) return `Error! ${error}`;
8

9
  return (
10
    <div>
11
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
12
      <button onClick={() => refetch()}>
13
        Refetch new breed!
14
      </button>
15
    </div>
16
  );
17
}

1
<button
2
  onClick={() =>
3
    refetch({
4
      breed: 'dalmatian', // Always refetches a dalmatian instead of original breed
5
    })
6
  }
7
>
8
  Refetch!
9
</button>

1
import { NetworkStatus } from '@apollo/client';
2

3
function DogPhoto({ breed }) {
4
  const { loading, error, data, refetch, networkStatus } = useQuery(
5
    GET_DOG_PHOTO,
6
    {
7
      variables: { breed },
8
      notifyOnNetworkStatusChange: true,
9
    }
10
  );
11

12
  if (networkStatus === NetworkStatus.refetch) return 'Refetching!';
13
  if (loading) return null;
14
  if (error) return `Error! ${error}`;
15

16
  return (
17
    <div>
18
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
19
      <button onClick={() => refetch()}>
20
        Refetch!
21
      </button>
22
    </div>
23
  );
24
}

1
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
}

1
const { loading, error, data } = useQuery(GET_DOGS, {
2
  fetchPolicy: 'network-only', // Doesn't check cache before making a network request
3
});

1
const { loading, error, data } = useQuery(GET_DOGS, {
2
  fetchPolicy: 'network-only', // Used for first execution
3
  nextFetchPolicy: 'cache-first', // Used for subsequent executions
4
});

1
new ApolloClient({
2
  link,
3
  client,
4
  defaultOptions: {
5
    watchQuery: {
6
      nextFetchPolicy: 'cache-only',
7
    },
8
  },
9
});

1
new ApolloClient({
2
  link,
3
  client,
4
  defaultOptions: {
5
    watchQuery: {
6
      nextFetchPolicy(currentFetchPolicy) {
7
        if (
8
          currentFetchPolicy === 'network-only' ||
9
          currentFetchPolicy === 'cache-and-network'
10
        ) {
11
          // Demote the network policies (except "no-cache") to "cache-first"
12
          // after the first request.
13
          return 'cache-first';
14
        }
15
        // Leave all other fetch policies unchanged.
16
        return currentFetchPolicy;
17
      },
18
    },
19
  },
20
});

1
new ApolloClient({
2
  link,
3
  client,
4
  defaultOptions: {
5
    watchQuery: {
6
      nextFetchPolicy(
7
        currentFetchPolicy,
8
        {
9
          // Either "after-fetch" or "variables-changed", indicating why the
10
          // nextFetchPolicy function was invoked.
11
          reason,
12
          // The rest of the options (currentFetchPolicy === options.fetchPolicy).
13
          options,
14
          // The original value of options.fetchPolicy, before nextFetchPolicy was
15
          // applied for the first time.
16
          initialFetchPolicy,
17
          // The ObservableQuery associated with this client.watchQuery call.
18
          observable,
19
        }
20
      ) {
21
        // When variables change, the default behavior is to reset
22
        // options.fetchPolicy to context.initialFetchPolicy. If you omit this logic,
23
        // your nextFetchPolicy function can override this default behavior to
24
        // prevent options.fetchPolicy from changing in this case.
25
        if (reason === 'variables-changed') {
26
          return initialFetchPolicy;
27
        }
28

29
        if (
30
          currentFetchPolicy === 'network-only' ||
31
          currentFetchPolicy === 'cache-and-network'
32
        ) {
33
          // Demote the network policies (except "no-cache") to "cache-first"
34
          // after the first request.
35
          return 'cache-first';
36
        }
37

38
        // Leave all other fetch policies unchanged.
39
        return currentFetchPolicy;
40
      },
41
    },
42
  },
43
});