Следуя шаблонам перекомпоновки 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 появится снова.
Фактический результат
Это то, что я был свидетелем
- ErrorScreen сохраняется и не исчезает
- Исходный props.data.error не изменился и по-прежнему показывает исходную ошибку без результата запроса
- Исходный props.data.netWorkStatus по-прежнему равен 8, что указывает на ошибку. Документы networkStatus, похоже, указывают что статус должен измениться на
4 - refetching
, но, возможно, я ищу не в том месте. - Исходный
props.data.loading
никогда не изменялся, что, как я полагаю, является ожидаемым поведением, поскольку из того, что я прочитал, это указывает только на первую попытку запроса
Мой вопрос
- Как добиться ожидаемого поведения, описанного выше? Что мне не хватает?
// SUCCESS
- person Chris Geirman   schedule 29.01.2018