如何使用 useLazyQuery() 在每次点击时执行查询

Posted 2023-03-10

【中文标题】如何使用 useLazyQuery() 在每次点击时执行查询

【英文标题】：How to execute query on every click using useLazyQuery()

【发布时间】：2020-02-04 10:41:54

【问题描述】：

使用来自@apollo/react-hooks 的useLazyQuery() 挂钩，我能够在单击按钮时执行查询。但我不能使用它在连续点击时执行相同的查询。

export default ( queryVariables ) => 
  const [sendQuery,  data, loading ] = useLazyQuery(GET_DIRECTION, 
    variables: queryVariables
  );

  return <div onClick=sendQuery>Click here</div>;

在上面的sendQuery 只执行一次。

【参考方案1】：

useLazyQuery 使用缓存优先的默认网络策略所以我认为您的 onClick 函数实际上会执行，但是由于返回的值是缓存中的值，React 注意到数据没有变化，因此状态没有更新，因为返回数据是它已经拥有的东西，没有重新渲染，事情似乎没有改变。我建议你应该传递一个不同的网络策略，比如

  const [sendQuery,  data, loading ] = useLazyQuery(GET_DIRECTION, 
    variables: queryVariables,
    fetchPolicy: "network-only"
  );

这意味着您需要从您的 api 获取最新信息，因此基本上没有缓存。 您可能还想尝试其他选项，看看哪一个最适合您 喜欢cache-and-network:你可以在这里找到更多understanding-apollo-fetch-policies

【讨论】：

像这样调用 onClick onClick=() => sendQuery()

【参考方案2】：

根据docs，useLazyQuery接受参数fetchPolicy。

const [lazyQuery,  data, loading ] = useLazyQuery(QUERY, 
  fetchPolicy: 'no-cache'
);

将fetchPolicy 设置为no-cache，查询的结果不会存储在缓存中。