Apollo (react-apollo): принудительный повторный запрос, даже если запрос не изменился
У меня есть конечная точка 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
Я нашел обходной путь. Если я перемещу кнопку в компонент 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 };
}