The `props.data` component does not restart after Apollo Refetch ()

After Apollo Recompose Patterns https://www.apollographql.com/docs/react/recipes/recompose.html

I created a simple ErrorScreen component that displays error.messageand displays a redo 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 from which ErrorScreen is called is pretty straight forward. Here is an example of its use, 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 was hoping the challenge refetch()would be ...

  • The reason ErrorScreen disappears is replaced by LoadScreen
  • If the props were successful, automatically download the component that is in error with the new data
  • If update failure is not possible, ErrorScreen will appear again.

Actual result

This is what I saw

  • ErrorScreen is saved and does not disappear
  • props.data.error - ,
  • props.data.netWorkStatus - 8, . networkStatus, , , 4 - refetching, , , .
  • props.data.loading , , , , , , .

  • , ? ?

+4
1
0

Source: https://habr.com/ru/post/1692698/


All Articles