遵循阿波罗的重组模式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 回答
我找到了一个解决方法,请在我自己的问题中查看:
Apollo refetch not rerendering component
就在文本'更新'下