reactjs - React component default props with graphql -
i'm trying fetch records backend graphql service , render them array.map function. unfortunately before they're loaded error because undefined. tried set default props on component didin't work. have check if loaded or there specific way inject default values props. code looks right now
import react 'react'; import { graphql } 'react-apollo'; import { fetchtasks } '../../../graphql/tasks'; import { dashboard } '../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);
yes have check if query has finished load. go through nice tutorial, build pokemon app. link points part show basic query , how check if loaded.
in case this:
import react 'react'; import { graphql } 'react-apollo'; import { fetchtasks } '../../../graphql/tasks'; import { dashboard } '../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);
Comments
Post a Comment