On my screen, I use delete buttons. Upon clicking the delete buttons, I run a graphql mutation and in order to get and render updated data, I call refetch every time. Similarly, whenever I enter the screen, I call refetch within useEffect. This process works fine.
However, every time I change anything minor in my code, for instance within UserDetails, which is a part of the ContactList, the app crashes and gives me this error:
TypeError: undefined is not an object (evaluating '_this.currentObservable.query.refetch')This error is located at: in Whitelist (at SceneView.tsx:98)When I reload the app, everything works fine. So I don't know what triggers this error initially. How can I fix this? Is it a problem in the code or refetch/apollo?
export const Whitelist: React.FunctionComponent = (props) => { console.log('props in whitelist', props); const navigation = useNavigation();useFocusEffect( useCallback(() => { refetch(); }, [])); const [deleteUserRelationMutation] = useDeleteUserRelationMutation({ onCompleted: () => { refetch(); Alert.alert('Contact Deleted'); }, onError: _onDeleteUserRelationError, }); const onDeleteContact = (relationId: number) => { Alert.alert('Warning', 'Are You Sure You Want to Delete Contact?', [ { text: 'Cancel', }, { text: 'Yes', onPress: () => { deleteUserRelationMutation({ variables: { id: relationId }, }); }, }, ]); }; const { error, data, refetch } = useUsersQuery({ variables: { where: { id: 1 }, }, }); return (<SafeAreaView style={styles.safeView}><Container style={styles.container}><Text onPress={() => navigation.navigate('Home')}>Zurück</Text><View></View><ContactList data={data} onDeleteContact={onDeleteContact}></ContactList></Container></SafeAreaView> );};