При написании фрагмента запроса GraphQL как части RelayContainer
я боролся с тем, как установить переменные запроса в определенных ситуациях. Основы, изложенные в документации, просты. достаточно. Но, учитывая статический характер этих запросов и то, что RelayContainer
является компонентом 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 может быть полезным но у меня все равно не будет доступа к моему хранилищу данных. Вот мои очевидные варианты:
- Оставить как есть
- Преобразуйте его в мутацию, которая будет выполняться в методе жизненного цикла компонента. Я бы не стал этого делать, поскольку это удаляет привязку данных к компоненту.
- Используйте пользовательский
RelayNetworkLayer
(у которого есть доступ к моему магазину), чтобы перехватывать мои запросы и устанавливать там переменные из внешнего хранилища. Это тоже похоже на взлом.