Apollo Refetch()之后组件`props.data`不重新加载

时间:2018-01-25 10:21:39

标签: react-native graphql apollo react-apollo

遵循阿波罗的重组模式 https://www.apollographql.com/docs/react/recipes/recompose.html

我创建了一个简单的ErrorScreen组件,它输出error.message并显示重试按钮。

const ErrorScreen = ({ refetch, data }) => {
  const handleRetry = () => {
    refetch()
      .then(({ data, loading, error, networkStatus }) =>
        // SUCCESS: now what do I do with the result?
        console.log('DBUG:refetch', { networkStatus, loading, error })
      )
      .catch(error => console.log({ error }));
  };
  return (
    <View style={styles.container}>
      <Text>{(data && data.error && data.error.message) || 'Something went wrong'}</Text>
      <Button title="Retry" onPress={handleRetry} />
    </View>
  );
};

调用ErrorScreen的组件非常简单。这是一个使用它的例子,以防上下文有帮助...

import React from 'react';
import { FlatList, View } from 'react-native';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { compose } from 'recompose';


import ErrorScreen, { renderIfError, setRefetchProp } from './ErrorScreen';
import LoadingScreen, { renderWhileLoading } from './LoadingScreen';
import Card from '../components/Card';

const EventList = ({ navigation, data: { me, error } }) => {
  return (
    <View style={styles.container}>
      <FlatList
        data={me.teams}
        renderItem={({ item }) => <CardItem team={item} navigation={navigation} />}
        keyExtractor={team => team.id}
      />
    </View>
  );
};

const options = {
  fetchPolicy: 'cache-and-network',
};
const withData = graphql(userEvents, options);

export default compose(
  withData,
  renderWhileLoading(LoadingScreen),
  setRefetchProp(),
  renderIfError(ErrorScreen)
)(EventList);

预期结果

我曾希望打电话给refetch() ......

  • 导致ErrorScreen消失,被LoadingScreen替换
  • 如果重新获取成功,则会自动加载因新数据而发生错误的组件
  • 如果重新获取失败,则会再次出现ErrorScreen

实际结果

这是我见过的

  • 错误屏幕仍然存在且不会消失
  • 原始props.data.error未更改,仍然显示原始错误,没有查询结果
  • 原始props.data.netWorkStatus仍为8,表示错误。 The networkStatus Docs似乎表明状态应该更改为4 - refetching,但也许我正在寻找错误的地方。
  • 原始props.data.loading从未改变过,我猜这是预期的行为,因为从我所看到的这只表示首次查询尝试

我的问题

  • 如何完成上述预期行为?我错过了什么?

相关问题

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方法,请在我自己的问题中查看:

Apollo refetch not rerendering component

在“更新”文本下