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 持续存在并且不会消失 原始 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
中使用它,就像这样...&lt;Flatlist ... onRefresh=props.data.refresh() >
。但由于某种原因,不在可重用范围内ErrorScreen
以上是关于Apollo Refetch() 后组件“props.data”不重新加载的主要内容,如果未能解决你的问题,请参考以下文章
Apollo useQuery() - 如果响应相同,则忽略“refetch”
我想每 3 秒更新一次,而不使用 react apollo refetch