当使用 React 和 GraphQL 准备好 Apollo 获取的数据时

Question

我想呈现一个日历组件（名为 Calendar），它将基于 GraphQL 查询以初始值 (events) 开始。
当用户按下按钮时，Calendar 将仅获取部分事件（无需添加查询）并重新呈现。我设法分别做了每一个，但没有同时做：

对于(1)：数据准备好才渲染，不使用状态，则无法完成(2)。对于 (2)：使用状态但无法完成 (1)。

下面的代码非常简单：

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) 中初始化事件然后使用 this.setState({events: events}) 反应将永远重新呈现。

问题：我如何完成 (1) 和 (2)？

Answer 1

我猜您想从 GraphQL 获取事件。当您单击要重新获取的 AnotherComponent 项目时。

通过查询设置状态的一种可能性是使用 componentWillReceiveProps 功能。但是不建议把状态和道具结合起来。

一个例子：

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

当使用 React 和 GraphQL 准备好 Apollo 获取的数据时

When the data that Apollo fetched is ready with React & GraphQL

reactjs

promise

graphql

apollo-client