Updates not broadcasted to UI when using writeQuery(). Works when using writeFragment()

[carllippert]

In a resolver for apollo-link-state I am updating an array and writing back to cache with writeQuery()

The updates are not broadcasting to UI. componentShouldUpdate() is not getting hit.

If I use writeFragment() on the specific items instead of writeQuery() it will broadcast.

Note also that I am not mutating cache results but cloning first, mutating clones, and rewriting.

apollo-cache-inmemory 1.3.6
apollo-client 2.4.3
react-apollo 2.2.4

[Akryum]

Getting the same issue but inside a mutation update option, a normal watched query not getting updated.

[Akryum]

See: #4031 (comment)

[hwillson]

The reason for this is explained in the Direct Cache Access section of the docs:

Note: The cache you created with new InMemoryCache(...) class is not meant to be used directly, but passed to the ApolloClient constructor. The client then accesses the cache using methods like readQuery and writeQuery. The difference between cache.writeQuery and client.writeQuery is that the client version also performs a broadcast after writing to the cache. This broadcast ensures your data is refreshed in the view layer after the client.writeQuery operation. If you only use cache.writeQuery, the changes may not be immediately reflected in the view layer. This behavior is sometimes useful in scenarios where you want to perform multiple cache writes without immediately updating the view layer.

[thminggg]

Hi @hwillson ,
getting similar issue here, which I want more clarification on client.writeQuery.

Question:

1. what's the reason that makes the UI updated or not?
2. what's the right way to pass the data object in writeQuery?

After trying many times, I ended up with codes updating both UI and caches in my project:

update: (store, { data: { courseUploadFilesToMediaStorageComplete } }) => {
  const { bookInfo } = store.readQuery({ query: GET_BOOK_BY_ID, variables: { bookId } });
  bookInfo.photos = [...bookInfo.photos, newPhoto];

  store.writeQuery({ 
      query: GET_BOOK_BY_ID, 
      variables: { bookId },
      data: {
          bookInfo
      }
  });
}

In this line: bookInfo.photos = [...bookInfo.photos, newPhoto];, the bookInfo object is amended directly and just passed back to writeQuery's data

This doesn't look okay to me as I saw people saying it needs to be "immutable" or "passing new object", etc.

It should only work I pass a new object using like lodash's cloneDeep of bookInfo and change the bookInfo.photos's array...

I am confused what's the reason makes the UI changed successfully