在 Apollo 客户端中使用 react-router 返回时 React 未更新其状态

Posted 2023-03-10

【中文标题】在 Apollo 客户端中使用 react-router 返回时 React 未更新其状态

【英文标题】：React not updating its state when come back using react-router in Apollo Client

【发布时间】：2017-06-23 12:46:24

【问题描述】：

我正在尝试实现一个场景，我需要添加一个新站点，然后返回站点列表页面，它需要获取新的更新记录。我现在正在使用带有 ReactJS 和 GraphQL 的 Apollo 客户端。

这是我的 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 />);
  

添加网站表单

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

【参考方案1】：

在 GraphQL 中，很难判断哪些查询需要在突变后自动重新获取，因此您需要告诉 Apollo 要做什么。

实现这一点的最简单方法是在您的查询容器中设置cache-and-networkfetch policy，然后它会在您返回时重新获取（默认情况下，它使用缓存）。看起来像：

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

您也可以使用refetchQueries 或updateQueries。