Question

我正在尝试实现一个场景，我需要添加一个新站点，并返回到站点列表页面，它需要获取新的更新记录。我现在正在使用带有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)
    )
  )
);

Answer 1

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

实现此目的的最简单方法是在查询容器中设置cache-and-network fetch policy，然后每当您返回时它将重新提取（默认情况下，它使用缓存）。那看起来像是：

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

您还可以使用refetchQueries或updateQueries。

在Apollo Client中使用react-router返回时，React不会更新其状态

1 个答案: