onCompleted handler not firing with Apollo Client Query - reactjs

Question

I'm having issues getting the onCompleted callback to fire when executing an Apollo Client query.
The query has no problems running, and it returns the results I would expect, but the onCompleted handler never fires. I have tried multiple things:
a) I have tried using HOC instead of the React component (see
comment at end of gist)
b) I've tried invalidating the cache and setting fetchPolicy to 'network-only'
I've tried setting the handler to "async"
There is an Github open issue related to what I'm experiencing, however the people in this thread only experience the problem when loading from cache. I'm experiencing the callback not firing all the time. https://github.com/apollographql/react-apollo/issues/2177
Here is a trimmed example of my code:
import React from 'react';
import { graphql, Query } from 'react-apollo';
import { ProductQuery } from '../../graphql/Products.graphql';
class EditProductVisualsPage extends React.Component {
constructor() {
super();
}
render() {
const { productId } = this.props;
return (
<Query
query={ProductQuery}
variables={{ id: productId }}
onCompleted={data => console.log("Hi World")}>
{({ loading, data: { product } }) => (
/* ... */
)}
</Query>
);
}
}
export default EditProductVisualsPage;
/*
export default graphql(ProductQuery, {
options: props => ({
variables: {
id: props.productId,
},
fetchPolicy: "cache-and-network",
onCompleted: function() {
debugger;
},
}),
})(EditProductVisualsPage);
*/
At this point I'm completely stumped. Any help would be appreciated.
Library versions
react-apollo (2.1.4)
apollo-client (2.3.1)
react(16.3.32)

Answer 1

(Answering this question since it has received a large number of views).
As of April, 2019, the onCompleted handler still remains broken. However, it can be worked around by utilizing the withApollo HOC. https://www.apollographql.com/docs/react/api/react-apollo#withApollo
Here is a sample integration:
import React from 'react';
import { withApollo } from 'react-apollo';
class Page extends React.Component {
constructor(props) {
super();
this.state = {
loading: true,
data: {},
};
this.fetchData(props);
}
async fetchData(props) {
const { client } = props;
const result = await client.query({
query: YOUR_QUERY_HERE, /* other options, e.g. variables: {} */
});
this.setState({
data: result.data,
loading: false,
});
}
render() {
const { data, loading } = this.state;
/*
... manipulate data and loading from state in here ...
*/
}
}
export default withApollo(Page);

Answer 2

Another solution, this worked for me. onCompleted is broken, but what you need is to call a function after X is completed. Just use good old .then(), here's an example for any newcomers to front-end.
fireFunction().then(() => {
console.log('fired')
});