react-apollo-hooks
react-apollo-hooks copied to clipboard
trojanowski
Mutation refetchQueries has only effect if useQuery is rendered at the same time
Heyo, I've created a CodeSandbox to showcase this:
In this example, if you click on "both", put something in the form and submit it, the list updates instantly. (As I would expect it to)
But if you click on the "form"-Button, so only the form, but not the list is rendered, then fill & submit the form and then go back to the "list" view, the list is still in the old state, which means the getList query seems not to have updated.
Funny enough, when using the evaluated graphql (passing the GET_LIST constant) instead of the string getList, it seems to update. But in that case, I have to provide all variables - and if the form does not know, which variables are used in a query in a different component, that means it is impossible to trigger the query from the form.
I thought so, too, but then it behaves differently depending on how it is rendered in react - and as far as I am aware, apollo-client does not know about react, does it?
Personally, I am suspecting a bug somewhere in useQuery here.
Just for verification: Here is a non-hook version using react-apollo - everything else is the same.
That version is working - I really suspect this is a bug in react-apollo-hooks.
Just ran into this same issue. Switched from using useMutation and useQuery to the <Mutation /> and <Query /> and it solved the problem, so I think @phryneas is correct that either the issue lies within react-apollo-hooks, or else react-apollo is doing its own work to paper over the issue in apollo-client.
Seriously? This has three views, because two views are required to show off the bug and one is required to show that there are conditions the bug does not happen. It consists of two components (that could be straight out of the readme of this lib), a query, a mutation and one "App" to switch between the views.
What do you want to simplify there?
after a muation, I have a list of refetch queries. I then expect the UI to update based on the refetch, but it does not. I get a 404 from GraphQL saying I didn't send variables: { ... : id } in my useQuery. Debugging shows that I am setting it, however useQuery is forgetting it. I put a useEffect and called refetch() again, and it works but I still get a 404 in my error message. useQuery is forgetting to put variables or they are out of scope when refetchQueries invokes it. My components are several functions down.
I just tested, '@apollo/react-hooks' does not seem to have the error.
https://codesandbox.io/s/reactapollohookcachebugreproduction-h7ubh
So well, I'm switching. But this is definitely a bug of this package.
@phryneas Is there documentation/discussion anywhere for @apollo/react-hooks? I'm guessing that's what we'll eventually all be using anyway but it looks pretty early stage right now.
@phryneas Is there documentation/discussion anywhere for @apollo/react-hooks? I'm guessing that's what we'll eventually all be using anyway but it looks pretty early stage right now.
No idea. But the API is almost the same as this project, so switching over is pretty painless, and everything seems to work - which is more than I currently have.