Apollo (react-apollo)：即使查询没有改变也强制重新查询答案

【问题标题】：Apollo (react-apollo): Force a re-query even if query didn't changeApollo (react-apollo)：即使查询没有改变也强制重新查询
【发布时间】：2018-10-30 02:14:35
【问题描述】：

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

如果查询本身没有改变，Apollo 的 Query 对象似乎不会重新查询。这是代码的sn-p：

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>
  }
}

如果性别或顶级变量发生变化，查询将重新运行，但如果我有一个强制重新查询的按钮，如果查询与上次它跑了。我阅读了文档，这似乎是正确的行为。

这是父组件内部的代码：

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

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

有什么想法吗？

谢谢！

【问题讨论】：

标签： reactjs graphql react-apollo

【解决方案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 };
}

【讨论】：