0

の一部として GraphQL クエリ フラグメントを作成するときRelayContainer、特定の状況でクエリ変数を設定する方法に苦労しました。ドキュメントで概説されている基本は十分に単純です。しかし、これらのクエリの静的な性質と、aRelayContainerが高次の React コンポーネントであることを考えると、クエリに必要な入力が Redux ストアなどの外部ソースからのオブジェクトである場合、これを処理する最善の方法がわかりません。コンポーネントが読み込まれる前にそのストアからデータを取得する方法がないため、回避策として、@includeディレクティブを使用し、コンポーネントの読み込み後に ready 変数を true に設定しています。

class ListData extends React.Component {

  // ... proptypes 

  componentWillMount() {
    const { listDataInfo } = this.context.store.getState(); // Retrieve from Redux store

    this.props.relay.setVariables({
      input: {
        id: listDataInfo.id,
        user: listDataInfo.user
      },
      inputReady: true,
    });

    // The query will now execute and fetch all the data
  }

  render() {
    return (
      {/* view */}
    )
  }
}

export default Relay.createContainer(ListData, {
  initialVariables: {
    input: null,
    inputReady: false,
  },
  fragments: {
    listData: () => Relay.QL`
      fragment on ListDataQuery {
        listData(input: $input) @include(if: $inputReady) {
          city
          state
          zip
          phone
        }
      }
    `,
  },
});

結局、これは期待どおりに機能しますが、これはハックのようなものであり、Relay がクエリ変数を処理する方法に関して重要な何かが欠けているのではないかと心配しています。これを行うより良い方法はありますか？prepareVariablesは役に立つように見えましたが、それでもデータ ストアにアクセスできませんでした。これが私の明らかなオプションです：

  1. そのままにしておく
  2. コンポーネントのライフサイクル メソッドで実行されるミューテーションに変換します。コンポーネントへのデータバインディングが削除されるため、これは行いたくありません。
  3. カスタムRelayNetworkLayer(ストアにアクセスできる) を使用して、クエリをインターセプトし、外部ストアから変数を設定します。これもハックのように感じます。
4

1 に答える 1

0

私が探しているものを正確に達成するこの要点を見つけました。@containerプロパティを使用して、デコレーターを介して redux 状態変数を渡すことができますvariablesFromState。基本的に、標準のリレー コンテナ (variablesFromStateが設定されていない場合)、またはProviderredux ストア インスタンスが渡された redux ラッパーでラップされたリレー コンテナのいずれかを返します。

于 2016-12-12T16:24:27.157 に答える