在页面加载时阻止graphql查询

时间:2017-07-23 14:52:27

标签: reactjs graphql react-apollo

每次打开我的页面时,我的页面都会查询到graphql。如何在页面加载时阻止查询,因为我只希望在用户单击“搜索”按钮时进行查询。

enter image description here

这是我的组件和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来采取正确的方法。

感谢任何帮助。提前谢谢。

0 个答案:

没有答案