When writing a GraphQL query fragment as part of a RelayContainer, I've been struggling with how to set query variables in certain situations. The basics outlined in the documentation are simple enough. But given the static nature of these queries and how a RelayContainer is a higher-order React Component, I'm not sure the best way to handle this when the input needed for a query is an object from an external source such as a Redux store. I don't have any way to retrieve data from that store before the component loads, so as a workaround I've been using the @include directive and setting a ready variable to true after the component loads:
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
}
}
`,
},
});
In the end this works as expected, but I'm concerned that this is more of a hack, and that I'm missing something important with how Relay should be handling query variables. Is there a better way to do this? The prepareVariables looked like it could be useful but I still wouldn't have access to my data store. Here are my apparent options:
- Keep it as is
- Convert it to a mutation that will execute in a component lifecycle method. I'd rather not do this as it removes the data binding to the component.
- Use a custom
RelayNetworkLayer(which has access to my store) to intercept my queries and set the variables from an external store there. This also feels like a hack.
