如何让 Apollo 客户端重新获取特定查询？答案

【问题标题】：How to get that Apollo Client is refetching specific query?如何让 Apollo 客户端重新获取特定查询？
【发布时间】：2021-11-23 09:34:19
【问题描述】：

应用程序中有几个地方在不同的突变后重新获取特定查询。

例子：

// Some component
const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, {
  refetchQueries: [{ query: getRecommendationsQuery }],
});

在我的RecommendationsComponent 中，我想知道这个查询正在加载，但是useQuery 的loading 在重新获取getRecommendationsQuery 时不会更新。

const {
  data,
  loading, // this loading is false all the time except first loading
} = useQuery(getRecommendationsQuery);

我可以尝试将useQuery 的refetch 放到上下文中并在任何地方使用它而不是refetchQueries 道具，但是有没有更好的方法来实现这一点而没有那个肮脏的黑客 - 要么让loading 工作，要么使用 apollo 客户端订阅该信息？

【问题讨论】：

标签： javascript reactjs apollo apollo-client

【解决方案1】：

当重新获取查询时，数据将被更新。您可以订阅从useQuery 钩子返回的data 对象的更改：

const {
  data,
  loading,
} = useQuery(getRecommendationsQuery);

useEffect(() => {
  console.debug("data has changed!", data]);
}, [data]);

【讨论】：

我需要知道它何时重新获取 - 它的加载状态，而不是重新获取的时间。
@AlexanderDanilov 然后在提交突变后立即将状态 isRefetching 设置为 true，并在上面的 useEffect 中在完成重新获取后将其设置为 false。
我的代码中的很多组件都发生了突变。

【解决方案2】：

试试这个：

import { NetworkStatus, useQuery } from '@apollo/client';

...

const { data, networkStatus, error } = useQuery(QUERY_DOC);

...

const isRefetching = networkStatus === NetworkStatus.refetch;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

useQuery Hook 只会调用 api 一次。需要调用refetch函数才能再次调用

const {
  data,
  loading, 
  refetch: getRecommendations // <- use this function to refetch the data
} = useQuery(getRecommendationsQuery);

这也将更新loading 状态

【讨论】：

【解决方案4】：

我在 github 上有两个 answers 用于该问题，将它们结合起来，终于奏效了：

将notifyOnNetworkStatusChange: true 传递给useQuery：

const { data, loading } = useQuery(getRecommendationsQuery, {
  notifyOnNetworkStatusChange: true
});

将文档而不是对象传递给 refetchQueries 属性：

// Some component
const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, {
  refetchQueries: [getRecommendationsQuery],
});

【讨论】：