アポロクライアントで反応ルータを使用して戻ったときに状態が更新されない

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

GraphQLで

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

追加サイトのフォーム、それはあなたが何をすべきかアポロを伝える必要がありますので、クエリが自動的に突然変異した後に再フェッチする必要がある伝えるのは難しいです。

これを達成する最も簡単な方法は、クエリコンテナにcache-and-networkfetch policyを設定してから、元に戻ったとき（デフォルトではキャッシュを使用）に再フェッチします。

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

ます。またrefetchQueriesまたはupdateQueriesを使用することができます。それは次のようになります。