Компонент `props.data` не перезагружается после Apollo Refetch ()

Следуя шаблонам перекомпоновки 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 никогда не изменялся, что, как я полагаю, является ожидаемым поведением, поскольку из того, что я прочитал, это указывает только на первую попытку запроса

Мой вопрос

  • Как добиться ожидаемого поведения, описанного выше? Что мне не хватает?

Связанные вопросы


person Chris Geirman    schedule 25.01.2018    source источник
comment
может ли fetchPolicy быть виноватым?   -  person Shayan Javadi    schedule 29.01.2018
comment
Спасибо, Шаян, я так не думаю, потому что я получаю данные обратно в комментарии // SUCCESS   -  person Chris Geirman    schedule 29.01.2018


Ответы (1)


Я нашел обходной путь, проверьте его в своем вопросе:

Компонент Apollo refetch без повторной отрисовки

сразу под текстом "Обновить"

person Irvin Chan    schedule 30.01.2018
comment
Спасибо, но ваша работа кажется очень специфичной для приложения, поскольку она основана на react-native-router-flux. Я не уверен, как экстраполировать это, чтобы решить мою проблему. Кроме того, я считаю, что это должно работать, если все сделано правильно, поэтому я предполагаю, что в этом случае я делаю это неправильно. Он работает, если я использую его внутри onRefresh onRefresh, вот так ... &lt;Flatlist ... onRefresh={props.data.refresh()} >. Но почему-то не в многоразовом ErrorScreen - person Chris Geirman; 31.01.2018