Comment gérer des requêtes profondément imbriquées lorsque les champs peuvent être null selon la connexion ou non?

Question

Donc disons que dans React nous avons this.props.viewer.parent.child.
Et disons que la réponse doit ressembler à quelque chose comme

{ 
    "data": { 
    "viewer": { 
     "parent": null 
    } 
    } 
} 

Cela créerait et erreur dans React (Cannot read property 'child' of null) parce que le parent est null.

Ce que j'ai pensé pour contourner ce problème est:

1. utilisation https://www.npmjs.com/package/dot-prop chaque fois à l'aide des données de relais, mais tout semble être une autre couche de complexité inutile .
2. Vous pouvez vérifier avec if puis rendre, mais c'est aussi problématique que vous auriez besoin d'aller en profondeur dans les composants et vérifier avec beaucoup de si.

3. Vous pouvez accéder au schéma GraphQL et ajouter return null à la résolution de chaque champ. Donc, la réponse ressemblerait à ceci:

   { "data": { "spectateur": { "parent": { "enfant": null} } } }

Que faites-vous pour contourner ce problème? Merci.

Answer 1

Je vérifie s'il existe un objet avant de l'utiliser.

if (this.props.viewer & this.props.viewer.parent){ doSomething(this.props.viewer.parent.child); }

Answer 2

Nous utilisons ramda (dans React ou partout où nous en avons besoin dans la pile), qui est une belle bibliothèque avec des utilitaires de programmation fonctionnelle. Celui que j'utiliserais ici serait le chemin. Il empêche le javascript de se planter lorsque quelque chose manque dans un objet imbriqué.

Si vous regardez Ramda, vous verrez qu'il s'agit d'une bibliothèque très puissante.