Comment définir les accessoires par défaut pour un composant encapsulé dans un conteneur Raley?

Question

J'ai un composant enveloppé dans un conteneur de relais:

const Widget = (props) => { 
    return (
    <div> { props.foo.bar } </div> 
) 
} 

Widget.defaultProps = { foo: {bar: 0} } 

export default Relay.createContainer(Widget, { 
    fragments: { 
    store:() => Relay.QL` 
     fragment on WidgetData { 
      foo { 
      bar 
      } 
     } 
     ` 
    } 
}) 

J'utilise un GraphQL-as-a-service fournisseur pour un back-end, et lorsque la propriété foo de WidgetData n'est pas présent, il retourne null, qui jette quand on essaie de rendre mon composant props.null.bar

pour autant que je sache, defaultProps ne fonctionne que lorsque l'hélice est undefined, pas quand il est null.

Comment puis-je protéger contre null résultats avec defaultProps dans ce cas? Espérant éviter d'écrire une déclaration de garde pour chaque prop Je référence, si possible.

Answer 1

Vous pouvez effectuer une vérification d'intégrité pour les accessoires du conteneur Relais.

render() { 
    let { 
    foo, 
    ...other 
    } = this.props; 
    let bar = foo ? foo.bar : ''; 
    return (
    <div> { bar } </div> 
) 
} 

Pour plus d'informations, check-out: https://github.com/bfwg/relay-gallery