writeQuery does not work with 2.0

I have a very simple query:

  query unreadChatMessagesCount {
    unreadChatMessagesCount
  }

unreadChatMessagesCount defined in the schema as Int!

And I am using the following code to create a subscription for the query:

    const q = this.props.client.watchQuery({
      query: totalUnreadCountQuery,
    });

    q.subscribe({
      next: console.log,
      error: console.log,
    });

I am using the default fetchPolicy, without polling.

The initial execution of the query works as expected and the result is printed to the log.

Then, my code does:

      const data = client.readQuery({ query: totalUnreadCountQuery });
      data.unreadChatMessagesCount = data.unreadChatMessagesCount + 1;
      client.writeQuery({ query: totalUnreadCountQuery, data });

The store updates and I can see it’s new value in the store, but the next of the watchQuery Observable is not triggered.

Also trying to execute it using react-apollo - but the props does not update.

UPDATE:

I did some debugging, and I think that maybe a call for broadcastQueries is missing after updating the store manually… adding this:

 client.queryManager.broadcastQueries();

After the writeQuery call did the trick and provides a temporary workaround.

Intended outcome:

Store should update, then trigger the next of the Observable, otherwise the subscribers can’t tell that the data has changed.

Actual outcome:

Store updates with new value, but the Observable’s next is not triggered.

How to reproduce the issue:

Use writeQuery to update a query that created with watchQuery (or with react-apollo HOC)

Version

    "apollo-cache": "^1.0.0",
    "apollo-cache-inmemory": "^1.0.0",
    "apollo-client": "^2.0.1",
    "apollo-link": "^1.0.0",
    "apollo-link-http": "^1.0.0",
    "graphql-anywhere": "^4.0.0",
    "graphql-tag": "^2.5.0",
    "react-apollo": "^2.0.0",

[hwillson]

The issue outlined in the reproduction from https://github.com/apollographql/apollo-client/issues/2415#issuecomment-459545805 points to a shortcoming in our docs. Our docs are a bit misleading with regards to expecting cache.writeQuery to always lead to watched queries being re-broadcast. If the following from the repro

this.apollo.cache.writeQuery({
  query: allPosts,
  data
});

is updated to be

this.apollo.client.writeQuery({
  query: allPosts,
  data
});

everything will work. This is because client.writeQuery takes care of calling the additionally required client.initQueryManager().broadcastQueries() automatically. Right now our docs lead people to believe that cache.writeQuery will make this happen, which is sort of true, but it depends on where it’s being used. If the repro was updated to use the mutate update option like this

@task
createPost = function*() {
  const result = yield this.apollo.mutate(
    {
      mutation: createPost,
      variables: {
        content: "A new post"
      },
      update: (cache, { data: { post: newPost } }) => {
        this.set("createdPosts", [...this.createdPosts, newPost]);
        const data = this.apollo.cache.readQuery({
          query: allPosts
        });
        data.allPosts = [...data.allPosts, newPost];
        this.apollo.cache.writeQuery({
          query: allPosts,
          data,
        });
      }
    },
    "post"
  );
}

then in that case calling cache.writeQuery would trigger the necessary re-broadcast, since update takes care of this.

Long story short, we should clarify this in the docs by adding a note somewhere in the Updating the cache section. I also think it would make sense to expose the Apollo Cache API in the left hand menu of the docs, down in the API section with Apollo Client and React Apollo. We could add extra details like this to those specific cache API docs, which would help with discovery.

I’ll create a new issue to track this work.

[rosskevin]

I tried all the following:

• updateQuery
• updateQuery + client.queryManager.broadcastQueries()
• readQuery + writeQuery
• readQuery + writeQuery + client.queryManager.broadcastQueries()

None of the above made the Query re-render.