使用来自 @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
仅执行一次。
最佳答案
useLazyQuery 使用缓存优先的默认网络策略所以我认为你的 onClick 函数实际上执行了,但是因为返回的值是缓存中的值,React 注意到数据没有变化,因此自返回以来状态没有更新数据是它已经拥有的数据,无需重新渲染,而且事情似乎没有改变。我建议您应该传递不同的网络策略,例如
const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, {
variables: queryVariables,
fetchPolicy: "network-only"
});
这意味着您需要从 api 获取最新信息,因此基本上没有缓存。
您可能还想尝试其他选项,看看哪一个最适合您
就像 cache-and-network:
你可以在这里找到更多信息 understanding-apollo-fetch-policies
关于reactjs - 如何使用 useLazyQuery() 在每次点击时执行查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58264413/