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

Posted

技术标签:

【中文标题】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 中使用它,就像这样...&amp;lt;Flatlist ... onRefresh=props.data.refresh() &gt;。但由于某种原因,不在可重用范围内ErrorScreen

以上是关于Apollo Refetch() 后组件“props.data”不重新加载的主要内容,如果未能解决你的问题,请参考以下文章

Apollo useQuery() - 如果响应相同,则忽略“refetch”

React Apollo 多次重新获取不起作用

我想每 3 秒更新一次,而不使用 react apollo refetch

Can't refetch query useffect React native expo Apollo

在 apollo-react 查询后调度 redux 操作

react-apollo 中的 data.refetch() 函数如何工作