Was Art und Weise bevorzugt wird, Data Dictionaries passieren mit Relais

Question

was Art und Weise Daten Wörterbücher passieren wird bevorzugt Relais verwendet wird, zum Beispiel habe ich in Interface

UsersList = [ 
    { 
    userName 
    // each user has select control 
    CountrySelectControl { 
     value = Country 
     options = [All Countries List] 
    } 
] 

Was ist der richtige Weg, um alle Länder Liste zu lesen? Wie ich verstehe, es ist keine gute Idee graphQl wie diese

{ users { userName, country, countriesList } } 

Die einzige Möglichkeit zur Abfrage ich sehe ich brauche countriesList an der Wurzel abzufragen, und übergeben Sie es manuell zu jeder Kinder-Komponente über Requisiten?

class Blabla extends Relay.Route { 
    static queries = { 
    users: (Component) => Relay.QL` 
     query UsersQuery { 
     users { ${Component.getFragment('user')} }, 
     } 
    `, 
    countriesList: (Component) => Relay.QL` 
     query countriesListQuery { 
     countriesList { ${Component.getFragment('countriesList')} }, 
     } 
    `, 
... 
} 

Und wenn ich viele Wörterbücher und eine tiefere UI-Struktur habe, wird das ein Schmerz.

Oder ich kann irgendwie Stammdaten tiefer in den Baum übergeben, ohne explizit diese Daten in Requisiten zu schreiben. (Ich meine ohne Kontext)

Answer 1

Ja, Sie können Stammdaten tiefer in Baum übergeben, ohne explizit countryList als Requisiten zu schreiben.

Angenommen, wir haben Daten eines Kontinents und der Länder, die dazu gehören. Wir haben UI-Komponenten verschachtelt. Zum Beispiel enthält ContinentComponent eine CountryListComponent, die eine Liste der Länder benötigt. A CountryListComponent besteht aus einer Anzahl von , die eine Liste von Zuständen benötigt. Anstatt ContinentComponent Pass-Country-Liste und State-Liste den ganzen Weg hinunter zu CountryListComponent und CountryComponent, können wir High-Level-Prop.

Wir sind die High-Level-continent in der High-Level-Komponente ContinentComponent prop angeben können, wie folgt:

export default Relay.createContainer(ContinentComponent, { 
    fragments: { 
    continent:() => Relay.QL` 
     fragment on Continent { 
     ${CountryListComponent.getFragment('continent')}, 
     } 
    `, 
    }, 
}); 

Statt country list stütze, nur die Stütze continent zu CountryListComponent vom ContinentComponent geben wird.

Als nächstes geben wir die notwendigen Requisiten im CountryListComponent:

export default Relay.createContainer(CountryListComponent, { 
    fragments: { 
    continent:() => Relay.QL` 
     fragment on Continent { 
     countryList(first: 100) { 
      edges { 
      node { 
       id, 
       name, 
      }, 
      ${CountryComponent.getFragment('country')}, 
      }, 
     }, 
     } 
    `, 
    }, 
}); 

Nun CountryListComponent gibt einen bestimmten Wert prop this.props.continent.countryList.edges[index].node zu CountryComponent.

Dieser Anwendungsfall ist eine der Hauptmotivationen von Relay.js.