Reactjs 使用Apollo客户端中的React路由器返回时，React不更新其状态

我正在尝试实现一个场景，在这个场景中，我需要添加一个新站点，并返回到站点列表页面，它需要获取新的更新记录。我现在正在将Apollo客户端与ReactJS和GraphQL一起使用

这是我的siteListContainer页面

export default class SitesGrid extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    try {
      let sites = this.props.data.viewer.sites.edges;

      if (sites.length > 0 ) {
        sites = sites.map(item => item.node);
        return (
          <GridView>
            {sites.map(this.renderSiteCard)}
          </GridView>
        );
      }

    } catch (e) {
      console.info('There was an error fetching sites.');
    }

    return (<div />);
  }
}

导出默认类站点Grid扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
试一试{
让sites=this.props.data.viewer.sites.edges；
如果（sites.length>0）{
sites=sites.map（item=>item.node）；
返回(
{sites.map（this.renderSiteCard）}
);
}
}捕获（e）{
console.info（'获取站点时出错'）；
}
返回（）；
}
}

添加网站表单

class SiteForm extends React.Component {

  // Form on submit
  onSubmit(event) {
      //mutation to create site
      this.props.mutate({
        variables: variables
      }).then(() => {
        browserHistory.push('/app/device-explorer');        
      });
      event.preventDefault();
    }
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>

        <ListViewItem>
          <label>Site Name</label>
          <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control"
                 aria-describedby="name" placeholder="Site Name"/>
        </ListViewItem>

        <ListViewItem className="text-xs-right">
          <button type="submit" className="btn btn-primary">Submit</button>
        </ListViewItem>

      </form>
    );
  }
}

export default (
  graphql(SiteSaveMutation)(
    graphql(SiteTypeQuery)(
      (SiteForm)
    )
  )
);

类SiteForm扩展React.Component{
//提交表格
提交（事件）{
//变异创建站点
这个。道具。变异({
变量：变量
}).然后（（）=>{
browserHistory.push（'/app/deviceexplorer'）；
});
event.preventDefault（）；
}
};
render（）{
返回(
站点名称
提交
);
}
}
导出默认值(
graphql（sitesave）(
graphql（SiteTypeQuery）(
（网站格式）
)
)
);

在GraphQL中，很难判断哪些查询在发生变异后需要自动重新提取，因此您需要告诉Apollo该怎么做

实现这一点的最简单方法是在查询容器中设置

缓存和网络

，然后无论何时返回，它都将重新蚀刻（默认情况下，它使用缓存）。这看起来像：

export default (
  graphql(SiteSaveMutation)(
    graphql(SiteTypeQuery, { options: { fetchPolicy: 'cache-and-network' } })(
      (SiteForm)
    )
  )
);

---

您还可以使用or。

在GraphQL中，很难判断在发生突变后哪些查询需要自动重新提取，因此您需要告诉Apollo该怎么做

实现这一点的最简单方法是在查询容器中设置

缓存和网络

，然后无论何时返回，它都将重新蚀刻（默认情况下，它使用缓存）。这看起来像：

export default (
  graphql(SiteSaveMutation)(
    graphql(SiteTypeQuery, { options: { fetchPolicy: 'cache-and-network' } })(
      (SiteForm)
    )
  )
);

您也可以使用或