graphact를 사용하여 구성 요소 기본 소품을 응답하십시오.

Question

나는 백엔드 그래프 서비스에서 레코드를 가져 와서 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을 살펴볼 수 있습니다. 링크는 기본 쿼리를 표시하는 부분을 가리키며로드되는 경우이를 확인하는 방법입니다.

귀하의 경우는 다음과 같을 수 있습니다 :

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