Reputation: 2242
I have a GraphQL end-point that returns a random name each time it is queried.
It seems that Apollo's Query object won't re-query if the query itself doesn't change. Here is a snippet of the code:
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>
}
}
If the gender or top variables change, the query will get re-run, but if I have a button that forces a re-query, it won't re-run the query if the query is exactly the same as the last time it ran. I read the docs and this seems to be proper behavior.
Here is code that is inside the parent component:
onClick() {
this.setState({
sendGender: this.state.currentGender,
sendTop: this.state.currentTop,
});
this.forceUpdate();
}
render() {
<Button onClick={() => this.onClick()}>Get Name</Button>
}
Any ideas?
Thank you!
Upvotes: 2
Views: 2232
Reputation: 2242
I found a workaround. If I move the button to be in the Query component, I can use the refetch() function. I still need to be able to change the query if my parent object has changed, though, so I can pass a function from my parent object to return its state:
< 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>
Then in the parent component, here is the refresh() function that gets passed:
onRefresh() {
return { gender: this.state.currentGender, top: this.state.currentTop };
}
Upvotes: 1