menu
Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

[React Native] Simple useMutation does not trigger UI update

July 28, 2020 at 9:07pm

[React Native] Simple useMutation does not trigger UI update

July 28, 2020 at 9:07pm
Hi, I have a challenge that I am trying to update the profile Avatar and Display Name of my users on my React Native app but when I do so - it does not trigger an update in the app even though the local cache is updated (I believe, as when I call manually for the data it looks like it is the correct one). Could someone please help me what to do?
The query: export const GET_PROFILE = gqlquery GetName($user_id: uuid!) { users_by_pk(id: $user_id) { username avatar_url } };
The mutation: export const UPDATE_PROFILE = gqlmutation UpdateProfile($id: uuid!, $username: String, $avatar_url: String) { update_users_by_pk( pk_columns: { id: $id } _set: { username: $username, avatar_url: $avatar_url } ) { id username avatar_url } };
The Query and Mutation (of the same data): // Query for the already existing data const { loading, error, data } = useQuery(GET_PROFILE, { variables: { user_id }, });
// Prepare mutation to update profile const [updateProfile] = useMutation(UPDATE_PROFILE);
And when the mutation is called in the component: updateProfile({ variables: { id: user_id, username: username, avatar_url: avatarURL }, });

July 29, 2020 at 5:46am
Hi , I've been having this problem with Apollo-client for months. After the mutation upon refetchingQuery for another query, the data comes in the network, however there is no UI update. It is a most troublesome problem that has not yet gone away for me and I have put it on hold.
  • reply
  • like

July 29, 2020 at 12:26pm
Hi , I've been having this problem with Apollo-client for months. After the mutation upon refetchingQuery for another query, the data comes in the network, however there is no UI update. It is a most troublesome problem that has not yet gone away for me and I have put it on hold.
I managed to fix it actually, I had to include the 'id' for the object in both my query and my mutation - that normalized the cache and how it was saved locally so when it was updated it automatically also updated the local cache.
Specifically in the above, I added in 'id' in this query:
export const GET_PROFILE = gqlquery GetName($user_id: uuid!) { users_by_pk(id: $user_id) { id username avatar_url } };
Edited
  • reply
  • like