Components never get updated after `writeData` or `writeQuery`

Intended outcome: Components update automatically after cache modification with writeData or writeQuery. You repeat it everywhere in your docs:

Any subscriber to the Apollo Client store will instantly see this update and render new UI accordingly.

Actual outcome: Components never get updated after writeData or writeQuery.

You have to call broadcastQueries() like so:

this.props.client.queryManager.broadcastQueries();

in order to force your <Query> tags to reload themselves to render your new cache data. But after you call broadcastQueries() a new issue arise - it reloads ALL your <Query> tags, not just those that you need. Huge performance issue.

ANd you have nothing in your docs about it. Question here

How to reproduce the issue:

class FooComponent extends PureComponent {
  
  componentDidMount() {
    
    const query = gql`
      query QQQ {
        Me {
          __typename
          id
          something
        }
      }
    `;
    
    // I call writeQuery manually
    // How does <Text> input change instantly with new value?  
    // Or change it to writeData
    this.props.client.cache.writeQuery({
      query: query,
      data: {
        Me: {
          __typename: 'User',
          id: 'be2ae9d718c9',
          something: 'ABSDEF'
        }
      }
    });
  }
  
  render() {
    
    let something = this.props.Something.something;
    
    // How does <Text> input change instantly with new value 
    // after I call writeQuery in componentDidMount above?
    return (
      <View>
        {/* HOW DOES IT CHANGE instantly after writeQuery or writeData ?? */}
<Query query={ GET_SOMETHING }>
      { params => {
        const data = get(params, 'data.Me.something', {}) || {};
        const something = data.something;
        return (
          <Text>
            {something}
          </Text>
        )
      } }
    </Query>
      </View>
    )
  }
}

export default compose(
  withApollo,
  graphql(getSomethingQuery, {
    name: 'Something'
  }),
)(FooComponent);

Versions

  System:
    OS: macOS High Sierra 10.13.4
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1
  npmPackages:
    apollo-boost: ^0.1.4 => 0.1.10 
    apollo-cache-inmemory: ^1.1.0 => 1.2.5 
    apollo-client: ^2.0.3 => 2.3.5 
    apollo-link: ^1.0.3 => 1.2.2 
    apollo-link-http: ^1.2.0 => 1.5.4 
    react-apollo: ^2.1.1 => 2.1.9 

[ctretyak]

any update on this? Just came across the same problem and it’s rather frustrating

you need to use another instance of the data object like this

update: (proxy, { data: { createTodo } }) => {
      const data = _.cloneDeep(proxy.readQuery({ query }));
      data.todos.push(createTodo);
      proxy.writeQuery({ query, data });
    },

[good-idea]

@wzup, This was happening to me and I (think) I fixed it by using client.writeQuery instead of client.cache.writeQuery. I’m not sure what the difference between these two functions is - but when I use the former, the rest of the components are updated with the new, written results.