在 Apollo Client 中重新获取查询

1
interface RefetchQueriesOptions<
2
  TCache extends ApolloCache<any>,
3
  TResult = Promise<ApolloQueryResult<any>>,
4
> {
5
  updateCache?: (cache: TCache) => void;
6
  include?: Array<string | DocumentNode> | "all" | "active";
7
  onQueryUpdated?: (
8
    observableQuery: ObservableQuery<any>,
9
    diff: Cache.DiffResult<any>,
10
    lastDiff: Cache.DiffResult<any> | undefined,
11
  ) => boolean | TResult;
12
  optimistic?: boolean;
13
}

1
await client.refetchQueries({
2
  include: ["SomeQueryName"],
3
});

1
await client.refetchQueries({
2
  include: [SOME_QUERY],
3
});

1
await client.refetchQueries({
2
  include: "active",
3
});

1
await client.refetchQueries({
2
  include: "all", // Consider using "active" instead!
3
});

1
await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.evict({ fieldName: "someRootField" });
4
  },
5
});

1
await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.evict({ fieldName: "someRootField" });
4
  },
5

6
  // Evict Query.someRootField only temporarily, in an optimistic layer.
7
  optimistic: true,
8
});

1
await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.modify({
4
      fields: {
5
        someRootField(value, { INVALIDATE }) {
6
          // Update queries that involve Query.someRootField, without actually
7
          // changing its value in the cache.
8
          return INVALIDATE;
9
        },
10
      },
11
    });
12
  },
13
});

1
const results = await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.evict({ fieldName: "someRootField" });
4
  },
5

6
  onQueryUpdated(observableQuery) {
7
    // Logging and/or debugger breakpoints can be useful in development to
8
    // understand what client.refetchQueries is doing.
9
    console.log(`Examining ObservableQuery ${observableQuery.queryName}`);
10
    debugger;
11

12
    // Proceed with the default refetching behavior, as if onQueryUpdated
13
    // was not provided.
14
    return true;
15
  },
16
});
17

18
results.forEach(result => {
19
  // These results will be ApolloQueryResult<any> objects, after all
20
  // results have been refetched from the network.
21
});

1
await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.evict({ fieldName: "someRootField" });
4
  },
5

6
  onQueryUpdated(observableQuery, { complete, result, missing }) {
7
    console.log(`Examining ObservableQuery ${
8
      observableQuery.queryName
9
    } whose latest result is ${JSON.stringify(result)} which is ${
10
      complete ? "complete" : "incomplete"
11
    }`);
12

13
    if (shouldIgnoreQuery(observableQuery)) {
14
      return false;
15
    }
16

17
    // Refetch the query unconditionally from the network.
18
    return true;
19
  },
20
});

1
await client.refetchQueries({
2
  updateCache(cache) {
3
    cache.evict({ fieldName: "someRootField" });
4
  },
5

6
  onQueryUpdated(observableQuery, { complete, result, missing }) {
7
    if (shouldIgnoreQuery(observableQuery)) {
8
      return false;
9
    }
10

11
    if (complete) {
12
      // Update the query according to its chosen FetchPolicy, rather than
13
      // refetching it unconditionally from the network.
14
      return observableQuery.reobserve();
15
    }
16

17
    // Refetch the query unconditionally from the network.
18
    return true;
19
  },
20
});

1
await client.refetchQueries({
2
  // Include all active queries by default, which may be ill-advised unless
3
  // you also use onQueryUpdated to filter those queries.
4
  include: "active";
5

6
  // Called once for every active query, allowing dynamic filtering:
7
  onQueryUpdated(observableQuery) {
8
    return !shouldIngoreQuery(observableQuery);
9
  },
10
});

1
const { queries, results } = client.refetchQueries({
2
  // Specific client.refetchQueries options are not relevant to this example.
3
});
4

5
const finalResults = await Promise.all(
6
  results.map((result, i) => {
7
    return Promise.resolve(result).catch(error => {
8
      console.error(`Error refetching query ${queries[i].queryName}: ${error}`);
9
      return null; // Silence this Promise rejection.
10
    });
11
  })
12
});