当前,我有一个useLazyQuery
钩,该钩在按下按钮时触发(搜索表单的一部分)。
该挂钩正常运行,仅在按下按钮时才会触发。但是,一旦触发一次,每次组件重新渲染时都会触发它(通常是由于状态更改)。
因此,如果我搜索一次,然后编辑搜索字段,结果将立即显示,而无需再次单击搜索按钮。
不是我想要的UI,如果您完全删除搜索文本(由于它试图使用null
作为变量进行搜索),则会导致错误,有什么方法可以防止useLazyQuery
从重新渲染时重新获得?
这可以通过使用useQuery
来解决,它依赖于“搜索”状态,当我单击按钮时,该状态会打开。但是,我宁愿看看是否可以避免增加组件的复杂性。
const AddCardSidebar = props => {
const [searching, toggleSearching] = useState(false);
const [searchParams, setSearchParams] = useState({
name: ''
});
const [searchResults, setSearchResults] = useState([]);
const [selectedCard, setSelectedCard] = useState();
const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
variables: { searchParams },
onCompleted() {
setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
}
});
...
return (
<div>
<h1>AddCardSidebar</h1>
<div>
{searchResults.length !== 0 &&
searchResults.map(result => {
return (
<img
key={result.scryfall_id}
src={result.image_uris.small}
alt={result.name}
onClick={() => setSelectedCard(result.scryfall_id)}
/>
);
})}
</div>
<form>
...
<button type='button' onClick={() => searchCardsQuery()}>
Search
</button>
</form>
...
</div>
);
};
答案 0 :(得分:10)
您不必在阿波罗客户端上使用Odoo 12
(可以,它可以工作)。但是,如果您想使用async
,则只需要在useLazyQuery
上传递变量,而不必直接在useLazyQuery调用上传递。
对于上面的示例,解决方案将是:
onClick
答案 1 :(得分:6)
react-apollo
文档没有提及useLazyQuery
是否应在变量更改时继续触发查询,但是当您要手动触发查询时,它们确实建议使用useApolloClient
钩子。它们have an example与该用例相匹配(单击按钮会触发查询)。
function DelayedQuery() {
const [dog, setDog] = useState(null);
const client = useApolloClient();
return (
<div>
{dog && <img src={dog.displayImage} />}
<button
onClick={async () => {
const { data } = await client.query({
query: GET_DOG_PHOTO,
variables: { breed: 'bulldog' },
});
setDog(data.dog);
}}
>
Click me!
</button>
</div>
);
}