每次打开我的页面时,我的页面都会查询到graphql。如何在页面加载时阻止查询,因为我只希望在用户单击“搜索”按钮时进行查询。
这是我的组件和graphql代码:
import React from 'react';
import PropTypes from 'prop-types';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
constructor(props) {
super(props);
this.state = {
value: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
submit() {
this.props.searchData.refetch({ asset_type: this.state.value})
}
render() {
<div>
<Input value={this.state.value} onChange={this.handleChange} />
<button onClick={() => { this.submit(); }} >
<span>Search</span>
</button>
</div>
// other html element
}
PlacementSearch.propTypes = {
searchData: PropTypes.shape({
refetch: PropTypes.function,
loading: PropTypes.bool.isRequired,
}).isRequired,
};
const queryVariable = gql`
query RootQuery($asset_type: String) {
am {
assets(asset_type: $asset_type) {
data {
uuid
label
asset_type
description
}
}
}
}
`;
export default graphql(queryVariable, {
name: 'searchData',
skip: props => props.url.stopQuery,
options: { variables: { asset_type: '' } },
})(PlacementSearch);
从文档中,使用skip
可能会阻止查询,但我不确定如何实现它。这就是我现在的做法,但我不知道如何将跳过更改为false。
props.url.stopQuery = true;
<PlacementSearch url={props.url} />
如何检查页面是否已完成加载,然后将skip
更改为false
。我甚至不确定我是否采用skip
来采取正确的方法。
感谢任何帮助。提前谢谢。