Apollo refetch not rerendering component - reactjs

Question

I'm fetching data from a web service using graphql my client code is this
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
ActivityIndicator,
View,
FlatList,
TouchableHighlight,
TextInput,
Button,
} from 'react-native';
import PropTypes from 'prop-types';
import { graphql, compose } from 'react-apollo';
import ZONES_QUERY from '../graphql/zones.query'
class ZonesScreen extends Component {
render() {
const { zones, loading, error } = this.props;
if (loading) {
return (
<ActivityIndicator style={styles.activityIndicator} size='large' />
)
} else if (error) {
return (
<View style={styles.container}>
<Text>Unexcpeted Error</Text>
<Button title="retry" onPress={() => { this.props.refetch() }}></Button>
</View>
)
} else {
return (
<View
style={styles.container}>
<FlatList
data={zones}
renderItem={({ item }) => ZoneRenderItem(item)}
keyExtractor={this.keyExtractor}
/>
</View>
)
}
}
//HELPER FUNCTIONS
keyExtractor = item => item._id;
}
ZonesScreen.propTypes = {
refetch: PropTypes.func,
}
const zonesQuery = graphql(ZONES_QUERY, {
options: {
forceFetch: true,
fetchPolicy: 'network-only',
notifyOnNetworkStatusChange: true,
},
props: ({ data: { loading, getRoutes, error, refetch } }) => ({
loading,
zones: getRoutes,
refetch,
error,
}),
})
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#eee',
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
},
});
export default compose(
zonesQuery,
)(ZonesScreen)
refetch is not working, when I press retry button it gets the response but component is not being reloaded.
Zones is a list of zones that I get from the service.
As you can see I have set three options to the query
forceFetch: true,
fetchPolicy: 'network-only',
notifyOnNetworkStatusChange: true,
all this read from github repository
https://github.com/apollographql/apollo-client/issues/1622
UPDATE!!!!!!!
I found a workaround using Actions from 'react-native-router-flux' basically the trick is force the rendering of component using Actions.refresh an pass props as parameters to reload them. see function refetch = () => { . I also create an refetching state that tells if data is refetching.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
ActivityIndicator,
View,
FlatList,
TouchableHighlight,
TextInput,
Button,
} from 'react-native';
import PropTypes from 'prop-types';
import { graphql, compose } from 'react-apollo';
import ZONES_QUERY from '../graphql/zones.query
class ZonesScreen extends Component {
constructor(props) {
super(props)
this.state = { refetching: false }
}
render() {
const { zones, loading, error } = this.props;
const { refetching } = this.state
if (loading || refetching) {
return (
<ActivityIndicator style={styles.activityIndicator} size='large' />
)
} else if (error) {
return (
<View style={styles.container}>
<Text>Unexcpeted Error</Text>
<Button title="retry" onPress={() => { this.refetch() }}></Button>
</View>
)
} else {
return (
<View
style={styles.container}>
<FlatList
data={zones}
renderItem={({ item }) => ZoneRenderItem(item)}
keyExtractor={this.keyExtractor}
/>
</View>
)
}
}
//HELPER FUNCTIONS
keyExtractor = item => item._id;
refetch = () => {
this.setState({ refetching: true });
this.props.refetch()
.then(() => { this.refreshComponent(false, this.props)
})
.catch(error => { this.refreshComponent(false, this.props);
})
}
refreshComponent = (refetching, props) => {
this.setState({ refetching: refetching });
Actions.refresh(props)
}
}
const zonesQuery = graphql(ZONES_QUERY, {
options:  {
errorPolicy: 'ignore',
fetchPolicy: 'network-only',
notifyOnNetworkStatusChange: true,
},
props: ({ data: { loading, getRoutes, error, refetch, } }) => ({
loading,
zones: getRoutes,
error,
refetch,
}),
})
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#eee',
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
},
});
export default compose(
zonesQuery,
)(ZonesScreen)