У меня возникли проблемы с настройкой refetchContainer в Relay Modern. Родительский компонент - это QueryRenderer, который запускает начальный запрос, соответствующим образом заполняя свойства дочернего компонента (a-pro-riately? Eh? Eh ?!). RefetchContainer определяет все наши переменные, а в событии onChange поля ввода повторно запускает запрос с новыми переменными. Все это работает отлично, за исключением того, что реквизиты ребенка никогда не обновляются новыми полученными данными. Я могу развернуть хранилище Relay и увидеть, что запрос действительно был получен с соответствующими данными. Некоторое время я бился об это головой, и я был бы признателен за некоторую помощь. Наверное, мне не хватает чего-то простого. И Господь знает, что документации Relay Modern очень мало.
Я ковырялся и не нашел подходящего решения. Похоже, у этого парня похожая проблема: повторная выборка реле не показывает результат
Родительский компонент с QueryRenderer:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { graphql, QueryRenderer } from 'react-relay';
import Search from './Search';
const propTypes = {
auth: PropTypes.object.isRequired,
};
class SearchContainer extends Component {
render() {
return (
<QueryRenderer
query={graphql`
query SearchContainerQuery($search: String!){
users: searchUsers(search:$search, first:10){
...Search_users
}
}`}
variables={{ search: 'someDefaultSearch' }}
environment={this.props.auth.environment}
render={({ error, props }) => {
if (error) {
console.log(error);
}
if (props) {
return <Search users={props.users} />;
}
return <div>No Dice</div>;
}}
/>
);
}
}
SearchContainer.propTypes = propTypes;
export default connect(state => ({ auth: state.auth }))(SearchContainer);
Дочерний компонент с createRefetchContainer:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { createRefetchContainer, graphql } from 'react-relay';
const propTypes = {
relay: PropTypes.object.isRequired,
users: PropTypes.object,
};
const defaultProps = {
users: {},
};
class Search extends Component {
render() {
return (
<div>
<input
type="text"
onChange={(e) => {
e.preventDefault();
this.props.relay.refetch({
search: e.target.value,
});
}}
/>
<ul>
{this.props.users.nodes.map(user =>
<li key={user.id}>{user.username}</li>,
)}
</ul>
</div>
);
}
}
Search.propTypes = propTypes;
Search.defaultProps = defaultProps;
export default createRefetchContainer(
Search,
{
users: graphql.experimental`
fragment Search_users on SearchUsersConnection
@argumentDefinitions(
search: {type: "String", defaultValue: ""}
) {
nodes {
id
displayName
username
}
}
`,
},
graphql.experimental`
query SearchRefetchQuery($search: String!) {
users: searchUsers(search:$search, first:10){
...Search_users @arguments(search: $search)
}
}
`,
);
GraphQL выглядит так:
# A connection to a list of `User` values.
type SearchUsersConnection {
# Information to aid in pagination.
pageInfo: PageInfo!
# The count of *all* `User` you could get from the connection.
totalCount: Int
# A list of edges which contains the `User` and cursor to aid in pagination.
edges: [SearchUsersEdge]
# A list of `User` objects.
nodes: [User]
}
Сетевые вызовы выполняются надлежащим образом, и данные возвращаются должным образом. NetworkCalls
Похоже, что директиву @arguments можно исключить из запроса refetch здесь:
query SearchRefetchQuery($search: String!) {
users: searchUsers(search:$search, first:10){
...Search_users @arguments(search: $search)
}
}
(удаление, похоже, не имеет никакого эффекта)
Я пробовал добавить директиву @arguments к фрагменту родительского компонента в соответствии с приведенной здесь рекомендацией: Передавать переменные в контейнер фрагментов в relay modern, но безрезультатно.
fragment Search_user on RootQueryType. Мое последнее предложение - включить отладчик и посмотреть, что происходит, когда вы получите данные. - person hisa_py schedule 21.12.2017