2016-12-09 7 views
0

GraphQLクエリフラグメントをRelayContainerの一部として記述するとき、特定の状況でクエリ変数を設定する方法に苦労しています。 documentationで概説されている基本は十分に簡単です。しかし、これらのクエリの静的な性質と、RelayContainerが高次のReact Componentであることを考えると、クエリに必要な入力がReduxストアなどの外部ソースからのオブジェクトである場合にこれを処理する最良の方法は不明です。で外部ストアからリレークエリフラグメントの変数を取得する

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

:回避策として、私は@includeディレクティブを使用して、コンポーネントの負荷後にtrueに準備ができて変数を設定してきたので、私は、コンポーネントをロードする前に、そのストアからデータを取得する方法を持っていませんこれは期待どおりに動作しますが、これはハッキングの問題で、Relayがクエリ変数をどのように扱うべきかについて重要なことを見逃していることが懸念されます。これを行うより良い方法はありますか? prepareVariablesは役に立ちそうですが、私のデータストアにはまだアクセスできませんでした。

  1. は、コンポーネントのライフサイクルメソッドで実行されます突然変異に変換されるようにしてください:ここに私の見かけのオプションがあります。私はむしろコンポーネントにデータバインディングを削除するので、これをやっていないだろう。
  2. RelayNetworkLayer(私の店舗にアクセスできる)というカスタムを使用して、クエリをインターセプトし、そこの外部ストアから変数を設定します。これはまた、ハックのように感じる。

答えて

0

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

関連する問題