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

Question

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

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

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

上面的 sendQuery 仅执行一次。

Answer 1

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

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

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