Component is not rerendered after an element of array is changed

[dima19972525]

Hi everyone.
I'm facing such issue with what i'm stragling a lot.
Apollo client version is ^3.7.6
I have a query

const { loading, error, data, refetch } = useGetAssessmentDataQuery({
    variables: { id: match.params.executionId },
    fetchPolicy: 'network-only',
    nextFetchPolicy: 'cache-only',
    errorPolicy: 'all',
    skip: isOffline,
  });

  console.log('test')

This query return to me such data

data: {
 assessment: {
    id: 'uuid',
    users: [{id: 'uuid', name: 'test', ...}]
 }
}

And i have a mutation like this

mutation UpdateUsers {
  updateUsers(params...) {
    id
    users {
      id
      name
    }
  }
}

I see an issue after executing mutation: the cache is always updated in right way (it always has a valid data) but the component (where i use the query) is not always rerender (sometimes it does rerender (usually when i remove "user") but in most cases it not ( console.log('test') not calling)).

Does anybody has an idea what can be the rootcause?
Thank you in advance.

[dima19972525]

It seems like i found an issue.
My mutation returns only id and name for users but the actual query has more data for uses (like email and so on).
So the reason why the component was not rerendered is because it was missing some data.

If anyone from apollo team could approve that this behaviour is expected it would be greate.

[jerelmiller]

Hey @dima19972525 👋

Thanks for your patience! Our team was heavily traveling for conferences to forgive the lack of reply for some time.

Are you expecting the array itself to update in your original query, or are you saying that some of the users returned from your mutation aren't updating the associated users in the list?

Assuming the former and you're looking to update the array itself, you'll need to perform a manual cache update to do that, otherwise the cache has no idea that the users field in your mutation corresponds to the same users field that assessment field in your query. This is like the source of what you're seeing.

I'd recommend taking a look at https://www.apollographql.com/docs/react/caching/cache-interaction to brush up on the cache write APIs. Hopefully one of these work well for your use case!