After running a query and rendering items via the UserList component, I use a button in the UserList to run a mutation for deleting an item. The components are linked, so passing the deleteContact function and using refetch() within it ensures that when a user is deleted, the UI is automatically updated.
However, another component called AddContact is not directly linked to the Whitelist component. So when a new user is added and I return to the Whitelist screen, the UI is not updated to show the newly added user. Is there a way to call refetch() every time the Whitelist screen is revisited?
export const Whitelist: React.FunctionComponent = (props) => {
// useEffect(() => {
// refetch()
// }, []);
const [deleteUserRelationMutation] = useDeleteUserRelationMutation({
onCompleted: (index: number) => {
refetch();
Alert.alert('Contact Deleted');
},
onError: _onDeleteUserRelationError
});
const onDeleteContact = (relationId: number) => {
deleteUserRelationMutation({
variables: { id: relationId}
})
};
const { loading, error, data, refetch } = useUsersQuery({
variables: {
where: { id: 1 },
},
});
return (
<SafeAreaView style={{ flex: 1 }}>
<Container style={{ flex: 1, alignItems: 'center' }}>
<Item style={styles.addToWhitelist}>
<Icon name="add" onPress={() => navigation.navigate('AddContact')} />
<Text >Add contact</Text>
</Item>
<ContactList data={data} onDeleteContact={onDeleteContact}></ContactList>
</Container>
</SafeAreaView>
);
};
export const ContactList: React.FunctionComponent<UserProps> = ({ data, onDeleteContact }) => {
if (!data) return null;
return (
<View style={styles.users}>
{data.users.nodes[0].userRelations.map(
(item: { relatedUser: RelatedUser, type: RelationType, id: number}) => {
const userName = item.relatedUser.firstName.concat(' ').concat(item.relatedUser.lastName);
return (
<View style={styles.item} key={item.id}>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
onPress={() => onDeleteContact(item.id)}
>
</Button>
</View>
</View>
);
},
)}
</View>
);
};
My attempts to call refetch in useEffect were successful when navigating from the homepage to the whitelist screen. However, revisiting the whitelist after adding a contact from the add contact screen did not update the UI.
I also tried using this in Whitelist:
useFocusEffect(
React.useCallback(() => {
console.log('refetching data');
refetch();
}, [])
);
The console.log('refetching data'); message appears each time I return to the screen, indicating that the refetch is triggered. However, the UI remains unchanged, suggesting that the refetch may not be functioning as expected.