Apollo (react-apollo)：强制重新查询，即使查询没有更改

Question

我有一个GraphQL端点，它在每次查询时都会返回一个随机名称。

如果查询本身没有改变，Apollo的Query对象似乎不会重新查询。以下是代码的一小段：

​

class RandomName extends React.Component {
render() {
  const query = gql`
			query name($gender: String, $top: Int) {
				name(gender: $gender, top: $top) {
					firstName
					gender
					surname
				}
			}
		`;
		return (
			<Query
				query={query}
				variables={{ gender: this.props.gender, top: this.props.top }}
				fetchPolicy="network-only"
			>
				{({ loading, error, data }) => {
        	if (loading) return <p>Loading...</p>;
					if (error) return <p>Error</p>;
          return <p>{name.firstName} {name.surname}</p>
        }}
      </Query>
  }
}

​

如果性别或top变量改变，查询将重新运行，但如果我有一个强制重新查询的按钮，如果查询与上次运行的查询完全相同，它将不会重新运行查询。我看了文档，这似乎是正常的行为。

下面是父组件内部的代码：

​

onClick() {
		this.setState({
			sendGender: this.state.currentGender,
			sendTop: this.state.currentTop,
		});
		this.forceUpdate();
}

render() {
<Button onClick={() => this.onClick()}>Get Name</Button>
}

​

有什么想法吗？

谢谢!

Answer 1

我找到了一种解决方法。如果我将按钮移动到Query组件中，就可以使用refetch()函数。但是，如果父对象发生了更改，我仍然需要能够更改查询，这样我就可以从父对象传递一个函数来返回其状态：

​

< Query
query = {
  query
}
variables = {
  {
    gender: this.props.gender,
    top: this.props.top
  }
}
fetchPolicy = "network-only" >
  {
    ({
      loading,
      error,
      data,
      refetch
    }) => {
      // Not shown: dealing with query
      // New button here...
      <button
        onClick = {() => {
            refetch(this.props.refresh());
          }
        }>
        Reload
      </button>

​

然后在父组件中，下面是传递的refresh()函数：

​

onRefresh() {
  return { gender: this.state.currentGender, top: this.state.currentTop };
}

​