Le composant `props.data` ne se recharge pas après Apollo Refetch()

Question

Suivre les modèles de recomposition d'Apollo https://www.apollographql.com/docs/react/recipes/recompose.html

J'ai créé un composant ErrorScreen simple qui affiche le message suivant error.message et affiche un bouton de réessai.

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>
  );
};

Le composant à partir duquel l'écran d'erreur est appelé est assez simple. Voici un exemple de son utilisation, au cas où le contexte serait utile...

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);

Résultat attendu

J'avais espéré que le fait d'appeler refetch() serait...

• Faire disparaître l'écran d'erreur (ErrorScreen), remplacé par l'écran de chargement (LoadingScreen).
• Si la récupération a réussi, charger automatiquement le composant qui a commis l'erreur initiale avec les nouvelles données.
• Si la récupération échoue, l'écran d'erreur réapparaît.

Résultat réel

Voici ce dont j'ai été témoin

• L'écran d'erreur persiste et ne disparaît pas
• Le fichier original props.data.error est inchangé et affiche toujours l'erreur originale, sans le résultat de la requête.
• La valeur originale de props.data.netWorkStatus est toujours de 8, ce qui indique une erreur. Les documents sur l'état du réseau semblent indiquer que le statut devrait passer à 4 - refetching mais peut-être que je ne cherche pas au bon endroit.
• Original props.data.loading n'a jamais changé, ce qui, je suppose, est un comportement attendu puisque, d'après ce que j'ai lu, cela n'indique que la première tentative d'interrogation.

Ma question

• Comment puis-je obtenir le comportement attendu décrit ci-dessus ? Que me manque-t-il ?

Questions connexes

• https://github.com/apollographql/apollo-client/issues/1622

Answer 1

J'ai trouvé une solution de contournement, voir ma propre question :

Apollo refetch ne redessine pas le composant

juste sous le texte "Mise à jour