2

リレーを使用してデータ辞書を渡すための好ましい方法は何ですか。たとえば、私はインターフェースに持っています

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

すべての国リストの正しい読み方は? 私が理解しているように、このようにgraphQlをクエリするのは良い考えではありません

{ users { userName, country, countriesList } }

だから私が見る唯一の方法は、ルートでcountriesListを照会し、小道具を介して手動ですべての子コンポーネントに渡す必要があるのですか?

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')} },
      }
    `,
...
}

そして、たくさんの辞書と、より深い UI 構造があると、これは苦痛になります。

または、このデータを明示的に props に書き込まずに、ツリーのより深いルート データを渡すことができます。(文脈なしという意味です)

4

1 に答える 1

0

countryListはい、小道具として明示的に記述せずに、ツリーのより深いルートデータを渡すことができます。

大陸とそれに属する国のデータがあるとします。入れ子になった UI コンポーネントがあります。たとえば、国のリストが必要な がContinentComponent含まれています。は多数の で構成され、CountryListComponent状態のリストが必要です。国リストと州リストをとまでずっと渡す代わりに、高レベルの prop を利用できます。CountryListComponentCountryComponentContinentComponentCountryListComponentCountryComponent

次のようcontinentに、高レベル コンポーネントで高レベル prop を指定できます。ContinentComponent

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

propの代わりに、ContinentComponent から CountryListComponentcountry listに prop のみが渡されます。continent

次に、 で必要な小道具を指定しますCountryListComponent。

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

ここでCountryListComponent、特定の prop 値this.props.continent.countryList.edges[index].nodeを CountryComponent に渡します。

このユース ケースは、Relay.js の主な動機の 1 つです。

于 2016-04-08T08:00:00.607 に答える