У меня есть такой маршрут
<Route path="/search" component={Search}>
Основной компонент Search
выглядит как это нравится
class Search extends React.Component {
constructor (props) {
super(props)
this.state = {query: ''}
}
handleSubmit (event) {
event.preventDefault()
this.setState({query: this.refs.queryInput.value})
}
renderSearchResult() {
if (this.state.query === '')
return <EmptySearchResult />
else
return <SearchResult query={this.state.query}/>
}
render() {
return (
<div className="searchContainer">
<div className="row">
<div className="search">
<form onSubmit={event => this.handleSubmit(event)}>
<input className="searchInput" placeholder="robocop" ref="queryInput" />
</form>
</div>
</div>
<div className="row">
{this.renderSearchResult()}
</div>
</div>
)
}
}
SearchResult
контейнер реле выглядит следующим образом
class SearchResult extends React.Component {
render() {
var {viewer: {moviesByTitle: movies}} = this.props;
return (
<div className="searchResult">
{movies.edges.map((edge,i) =>
<div key={i} className="rowItem scrollRowItem">
<Movie movie={edge.node} />
</div>)}
</div>
)
}
}
export default Relay.createContainer(SearchResult, {
initialVariables: {
query: '???'
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
moviesByTitle(title: $query, first: 10) {
edges {
node {
${Movie.getFragment('movie')}
}
}
}
}
`
}
})
Ошибка:
Warning: RelayContainer: Expected prop `viewer` to be supplied to `SearchResult`, but got `undefined`. Pass an explicit `null` if this is intentional.
Что я пытался сделать внутри моего компонента поиска (выделены жирным шрифтом)
const ViewerQueries = {
viewer: () => Relay.QL`query { viewer }`
}
...
renderSearchResult() {
if (this.state.query === '')
return <EmptySearchResult />
else
return <SearchResult query={this.state.query} queries={ViewerQueries} />
}
Но, конечно, это не работает, потому что запросы необходимо каким-то образом привязать к Route
Вопросы
-
Мой
Search
Компонент - это только презентационный компонент, который не нуждается в собственных данных. Вместо этого он просто передаетquery
prop в контейнер релеSearchResult
. Как я должен структурировать контейнеры компонентов и ретрансляторов для правильного их присоединения к Маршруту? -
Как я могу использовать
SearchResult
query
prop для установки переменной в фрагменте запроса реле? -
Я не понимаю абстракцию "зрителя" вообще - большинство примеров, которые я видел, очень надуманны и не показывают, как они будут работать в более реалистичной обстановке; например, пользователи с различным доступом к разным ресурсам или разные части вашей программы, предназначенные для просмотра разных фрагментов данных.