Reagieren Komponente Standardrequisiten mit graphql

Question

Ich versuche, Datensätze von Back-End-Graphql-Dienst abzurufen und rendern sie mit Array.map-Funktion. Leider bekomme ich vor dem Laden einen Fehler, weil sie undefiniert sind. Ich habe versucht, Standardrequisiten auf der Komponente zu setzen, aber es hat nicht funktioniert. Muss ich überprüfen, ob alles geladen ist oder gibt es eine spezielle Möglichkeit, Standardwerte in diese Requisiten zu injizieren? Mein Code sieht jetzt so aus

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

Ja, Sie müssen überprüfen, ob die Abfrage beendet ist zu laden. Du könntest durch diese nette tutorial gehen, wo du eine Pokemon App erstellst. Der Link zeigt auf den Teil, wo sie eine grundlegende Abfrage zeigen und wie Sie überprüfen, ob sie geladen ist.

In Ihrem Fall könnte es so aussehen:

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