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

Posted 2023-03-10

【中文标题】如何让 Apollo 客户端重新获取特定查询？

【英文标题】：How to get that Apollo Client is refetching specific query?

【发布时间】：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 客户端订阅该信息？

【参考方案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],
);