reactjs - 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);