使用 graphql 反应组件默认道具

Question

我正在尝试从后端 graphql 服务获取记录并使用 Array.map 函数呈现它们。不幸的是，在加载它们之前我得到了错误，因为它们是未定义的。我试图在组件上设置默认道具，但没有用。我是否必须检查所有内容是否已加载或是否有特定方法将默认值注入这些道具。我的代码现在看起来像那样

import React from 'react';
import { graphql } from 'react-apollo';
import { fetchTasks } from '../../../graphql/tasks';
import { Dashboard } from '../components/Dashboard';

const propTypes = {
    data: React.PropTypes.shape({
        tasks: React.PropTypes.array
    })
};

const defaultProps = {
    data: {
        tasks: []
    }
};

class DashboardContainer extends React.Component {
    render() {
        const titles = this.props.data.tasks.map(task => task.title);
        return(
            <Dashboard
                titles={titles}
            />
        );
    }
}

DashboardContainer.propTypes = propTypes;
DashboardContainer.defaultProps = defaultProps;

export default graphql(fetchTasks)(DashboardContainer);

Answer 1

是的，您必须检查查询是否已完成加载。您可以浏览这个不错的 tutorial，您可以在其中构建一个 pokemon 应用程序。 link 指向显示基本查询的部分以及您如何检查它是否已加载。

在你的情况下它可能是这样的：

import React from 'react';
import { graphql } from 'react-apollo';
import { fetchTasks } from '../../../graphql/tasks';
import { Dashboard } from '../components/Dashboard';

const propTypes = {
  data: React.PropTypes.shape({
    tasks: React.PropTypes.array
  })
};

const defaultProps = {
  data: {
    tasks: []
  }
};

class DashboardContainer extends React.Component {
  render() {
    if (this.props.data.loading) {
      return <div > Loading < /div>;
    }

    const titles = this.props.data.tasks.map(task => task.title);
    return ( <
      Dashboard titles = {
        titles
      }
      />
    );
  }
}

DashboardContainer.propTypes = propTypes;
DashboardContainer.defaultProps = defaultProps;

export default graphql(fetchTasks)(DashboardContainer);

使用 graphql 反应组件默认道具

React component default props with graphql

reactjs

graphql

react-apollo

apollo-client