Apollo (реагировать-apollo): вызвать повторный запрос, даже если запрос не изменился - PullRequest
Новая
       7

Apollo (реагировать-apollo): вызвать повторный запрос, даже если запрос не изменился

0 голосов
/ 20 мая 2018

У меня есть конечная точка GraphQL, которая возвращает случайное имя при каждом запросе.

Кажется, что объект запроса Apollo не будет повторно запрашивать, если сам запрос не изменяется.Вот фрагмент кода: 

class RandomName extends React.Component {
render() {
  const query = gql`
			query name($gender: String, $top: Int) {
				name(gender: $gender, top: $top) {
					firstName
					gender
					surname
				}
			}
		`;
		return (
			<Query
				query={query}
				variables={{ gender: this.props.gender, top: this.props.top }}
				fetchPolicy="network-only"
			>
				{({ loading, error, data }) => {
        	if (loading) return <p>Loading...</p>;
					if (error) return <p>Error</p>;
          return <p>{name.firstName} {name.surname}</p>
        }}
      </Query>
  }
}

Если переменные пола или верхней части изменятся, запрос будет выполнен повторно, но если у меня есть кнопка, которая вызывает повторный запрос, он не будет повторноЗапустите запрос, если запрос точно такой же, как в прошлый раз.Я прочитал документы, и это похоже на правильное поведение.

Вот код, который находится внутри родительского компонента: 

onClick() {
		this.setState({
			sendGender: this.state.currentGender,
			sendTop: this.state.currentTop,
		});
		this.forceUpdate();
}

render() {
<Button onClick={() => this.onClick()}>Get Name</Button>
}

Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 20 мая 2018

Я нашел обходной путь.Если я переместлю кнопку в компонент Query, я смогу использовать функцию refetch ().Мне все еще нужно иметь возможность изменить запрос, если изменился мой родительский объект, поэтому я могу передать функцию из моего родительского объекта, чтобы вернуть его состояние: 

< Query
query = {
  query
}
variables = {
  {
    gender: this.props.gender,
    top: this.props.top
  }
}
fetchPolicy = "network-only" >
  {
    ({
      loading,
      error,
      data,
      refetch
    }) => {
      // Not shown: dealing with query
      // New button here...
      <button
        onClick = {() => {
            refetch(this.props.refresh());
          }
        }>
        Reload
      </button>

Затем в родительском компоненте передается функция refresh (), которая передается: 

onRefresh() {
  return { gender: this.state.currentGender, top: this.state.currentTop };
}
...