Apollo refetch not rerendering component

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)