Apollo Refetch() 后组件“props.data”不重新加载

Posted 2023-03-08

【中文标题】Apollo Refetch() 后组件“props.data”不重新加载

【英文标题】：Component `props.data` Doesn't Reload After Apollo Refetch()

【发布时间】：2018-07-04 13:31:36

【问题描述】：

遵循 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 会再次出现

实际结果

这是我亲眼目睹的

ErrorScreen 持续存在并且不会消失 原始 props.data.error 未更改，仍显示原始错误，无查询结果 原来props.data.netWorkStatus还是8，说明有错误。 The networkStatus Docs 似乎表明状态应该更改为 4 - refetching 但也许我找错了地方。 原来的 props.data.loading 从未改变，我猜这是预期的行为，因为从我读到的内容来看，这仅表示第一次查询尝试

我的问题

如何实现上面记录的预期行为？我错过了什么？

相关问题

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

【问题讨论】：

fetchPolicy 可能是罪魁祸首吗？

谢谢 Shayan，我不这么认为，因为我在 // SUCCESS 评论中获取数据

【参考方案1】：

我找到了解决方法，请在我自己的问题中查看：

Apollo refetch not rerendering component

就在“更新”文本下方

【讨论】：

谢谢，但您的解决方法似乎非常特定于应用程序，因为它依赖于react-native-router-flux。我不确定如何从中推断来解决我的问题。另外，我相信如果做得对，它应该“正常工作”，所以我认为在这种情况下我做错了。如果我在 flatlst onRefresh 中使用它，就像这样...<Flatlist ... onRefresh=props.data.refresh() >。但由于某种原因，不在可重用范围内ErrorScreen