Apollo重新获取不重新渲染组件

我正在使用 graphql 从网络服务获取数据，我的客户端代码是这样的

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)

重新获取不起作用，当我按下重试按钮时，它会得到响应，但组件没有被重新加载。

区域是我从服务中获取的区域列表。

正如你所看到的，我为查询设置了三个选项

强制获取：真实， fetchPolicy: '仅网络', 通知网络状态更改：true，

所有这些都是从 github 存储库读取的

https://github.com/apollographql/apollo-client/issues/1622 https://github.com/apollographql/apollo-client/issues/1622

更新！！！！！！！

我找到了一种使用“react-native-router-flux”中的 Actions 的解决方法，基本上，技巧是使用 Actions.refresh 传递 props 作为参数来强制渲染组件以重新加载它们。见功能refetch = () => {。我还创建了一个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)