时间戳

首页 > 解决方案 > 如何使用 useLazyQuery() 在每次点击时执行查询

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

问题描述

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

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

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

在上面sendQuery只执行一次。

标签： reactjsreact-apolloapollo-clientreact-apollo-hooks

解决方案

useLazyQuery 使用缓存优先的默认网络策略所以我认为您的 onClick 函数实际上会执行，但是因为返回的值是缓存中的值，所以 React 注意到数据没有变化，因此状态没有更新，因为返回的数据是什么它已经有这种方式没有重新渲染，事情似乎没有改变。我建议您应该传入不同的网络策略，例如

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

这意味着您需要来自您的 api 的最新信息，因此基本上没有缓存。您可能还想尝试其他选项，看看哪个最适合您，cache-and-network:您可以在此处了解更多信息了解-apollo-fetch-policies

推荐阅读