Component `props.data` Doesn't Reload After Apollo Refetch()

Question

Following Apollo's Recompose Patterns https://www.apollographql.com/docs/react/recipes/recompose.html

I've created a simple ErrorScreen component which outputs the error.message and displays a retry button.

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

The component the ErrorScreen is being called from is pretty straight forward. Here's an example of a it's usage, just in case the context helps...

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

Expected Result

I had hoped that calling refetch() would...

• Cause the ErrorScreen disappear, being replaced by the LoadingScreen
• If refetch were successful, automatically load the component that orignally errored with the new data
• If refetch failed, the ErrorScreen would appear again

Actual Result

This is what I've witnessed

• ErrorScreen persists and does not disappear
• Original props.data.error is unchanged and still shows original error, w/o query result
• Original props.data.netWorkStatus is still 8, indicating an error. The networkStatus Docs seem to indicate that the status should change to 4 - refetching but maybe I'm looking in the wrong place.
• Original props.data.loading never changed, which I guess is expected behavior since from what I've read this only indicates first query attempt

My Question

• How do I accomplish the expected behavior documented above? What am I missing?

Related Issues

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

Answer 1

I found an workaround, check it out in my own question:

Apollo refetch not rerendering component

just under the text 'Update'