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

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

以下是父组件内的代码：

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（）函数。但是，如果我的父对象已经改变，我仍然需要能够更改查询，所以我可以从我的父对象传递一个函数来返回它的状态：

＆＃13;

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

＆＃13;

然后在父组件中，这是传递的refresh（）函数：

＆＃13;

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

＆＃13;

Apollo（react-apollo）：即使查询没有改变，也强制重新查询

1 个答案: