當阿波羅取出的數據準備與之反應及GraphQL

我想渲染，將與初始值（events）的基礎上，GraphQL查詢開始日曆組件（名爲Calendar）。
當用戶按下按鈕時，Calendar將只獲得一些事件（不需要添加查詢）並將重新渲染。我設法單獨地做他們每個人的，但不能同時：

對於（1）：使僅當數據準備就緒時，不使用狀態，那麼不能完成（2）。（2）：使用狀態但不能完成（1）。當阿波羅取出的數據準備與之反應及GraphQL

下面的代碼是非常直截了當：

import React, { Component, PropTypes } from 'react'; 
import gql from 'graphql-tag'; 
import { graphql } from 'react-apollo'; 

const requestsQuery = gql`query requestsQuery { ... } 

class MainComponent extends Component { 
    constructor() { 
     super(); 
     this.state = { 
     events: [] 
     }; 
     // here i want to know when the data that apollo fetched is ready 
     // and then i will create events (using the data) 
     // and then: 
     // this.setState({events: events}); 
    } 

    renderLoader() { 
     return (
     <div> 
      Loading... 
     </div> 
    ); 
    } 

    onItemClick(){ 
     // make some events 
     this.setState({events: events}); 
    } 

    renderCalendar(){ 
     return (
     <Calendar events={this.state.events}/> 
    ); 
    } 

    renderRows(requests) { 
     return (
     requests.map((request) => { 
      return (
      <div> 
       {request.displayName} 
       <button onClick = {this.onItemClick.bind(this, request)}>show only some events</button> 
      </div> 
     ); 
     }) 
    ); 
    } 

    render() { 
     const { loading, requests } = this.props; 

     return (
      <div> 
      {loading 
       ? this.renderLoader() 
       : <div>{this.renderRows(requests)}</div> 
      } 
      </div> 
     ); 
    } 
} 

const MainComponentWithData = graphql(requestsQuery, { 
    props({ ownProps, data: { loading, requests } }) { 
    return { 
     loading, 
     requests 
    }; 
    }, })(MainComponent);

裏面的render()方法我知道，當負載是假的，因此，數據已經準備好，但我不知道如何做到這一點的其他地方。

如果我初始化事件renderRows(requests)，然後使用反應將永遠放棄。

問題：我該如何完成（1）和（2）？

來源

2017-03-02 Edan Chetrit

我想你想從GraphQL中獲取事件。當你點擊你想重新獲取的AnotherComponent項目時。

從查詢設置狀態的一種可能性是使用componentWillReceiveProps功能。但不建議將州和道具組合起來。

一個例子：

... 
 
componentWillReceiveProps(newProps) { 
 
    if (!newProps.<query name>.loading) { 
 
     ... 
 
     this.setState({events: events}); 
 
    } 
 
    } 
 
    ...

來源

2017-03-03 09:42:17

謝謝！爲什麼不建議結合國家和道具？你是否推薦使用不同的架構來實現這一點？ –

這裏是一些進一步閱讀有關使用道具來初始化狀態的鏈接[react anti-pattern]（https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e#。 3r4jfbxup）。一種可能性是，您可以獲取查詢中的所有相關數據，並創建發送給渲染函數中Calendar元素的事件。現在，當您按onClick時，您將設置一個單一狀態（種類「月」，「日」），您可以從第一個查詢中選擇其他值 –

當阿波羅取出的數據準備與之反應及GraphQL

回答

相關問題