Open publicJorn opened 4 years ago
I am facing the same issue with 3.1.3
Any ideas on how to workaround this?
This seems to happen only for those components using graphQL as HOC. RenderProps and hooks seems to have no impact. Here is an workaround to use as a render prop...
`
<br />
<label>
Author: <input name="author" value={author} onChange={this.change('author')} />
</label>
<br />
<button type="submit">Add</button>
</form>)}
</Mutation>`
@varmakarthik12 I already tested this, but tried again with your example. Unfortunately it doesn't work. Not with 3.1.3 anyway.
If you check out the demo repo and replace the AddBook file with the following:
import React from 'react'
import { graphql, Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import { Link } from 'react-router-dom'
const mutation = gql`
mutation AddBook($title: String!, $author: String!) {
addBook(title: $title, author: $author) {
guid
}
}
`
class AddBook extends React.Component {
state = {
title: '',
author: '',
}
submit = addBookMutation => evt => {
evt.preventDefault()
addBookMutation({
variables: {
...this.state,
},
refetchQueries: () => ['BookList'],
awaitRefetchQueries: true,
}).then(() => {
this.props.history.push('/')
})
}
change = name => evt => {
this.setState({
[name]: evt.target.value,
})
}
render() {
const { title, author } = this.state
return (
<Mutation mutation={mutation}>
{(addBookMutation, { data }) => (
<>
<h2>Add a book</h2>
<form onSubmit={this.submit(addBookMutation)}>
<label>
Title: <input name="title" value={title} onChange={this.change('title')} />
</label>
<br />
<label>
Author: <input name="author" value={author} onChange={this.change('author')} />
</label>
<br />
<button type="submit">Add</button>
</form>
<p>
<Link to="/">Back to book list</Link>
</p>
</>
)}
</Mutation>
)
}
}
export default graphql(mutation)(AddBook)
any Update / Workaround for this issue?
This occurs even in 4.0.0beta. This is a bit annoying if we want to migrate to apollo client 3.1 you need to migrate all the way to react-hooks and some bugs still exist. There is no support and many similar bugs pop up over different versions.
I fixed this by removing all refetchQueries and relying on the local state update to refresh the related queries. Thankfully most of the refetchQueries relied on that in our codebase
Same issue here, we can't update our react-apollo package because of this.
Intended outcome:
When using
refetchQueries
in the options of a mutation, I expect the listed queries to refetch and my UI being updated.Actual outcome:
No queries are refetched.
When debugging, I can see that the QueryManager doesn't have the query that I expect it to have. It does have an entry, but the
observableQuery
property is null.How to reproduce the issue:
I have made this demo repo: https://github.com/publicJorn/apollo-refetchqueries-bug
Please follow the instructions to run it on your local machine.
Version
Note that this error DID NOT occur with react-apollo@2.5.8.
You can downgrade in the demo repo to see it working as intended:
yarn upgrade react-apollo@2.5.8
npx envinfo@latest --preset apollo --clipboard