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