Weird apollo-client's queryObservable's behaviour

apollo_error_sample.js

import React from "react";
// ....

// Response from server
// {"data":{"entities":{"edges":[{"cursor":"MQ==","node":{"__id":"1","name":"Coke","__typename":"Brand"},"__typename":"BrandEdge"},{"cursor":"Mg==","node":{"__id":"2","name":"Pepsi","__typename":"Brand"},"__typename":"BrandEdge"},{"cursor":"Mw==","node":{"__id":"3","name":"Heinz","__typename":"Brand"},"__typename":"BrandEdge"}],"pageInfo":{"hasNextPage":false,"startCursor":"MQ==","endCursor":"Mw==","__typename":"PageInfo"},"__typename":"BrandConnection"}}}

const filtersQuery = gql`
  query ($first: Int, $name: String, $orderDirection: OrderDirection, $orderProperty: BrandOrderProperty) {
    entities: brandsConnection(first: $first, name: $name, orderDirection: $orderDirection, orderProperty: $orderProperty) {
      edges {
        cursor
        node {
          __id
          name
        }
      }
      pageInfo {
        hasNextPage
        startCursor
        endCursor
      }
    }
  }
`;


const initialVariables = {
  first: 10,
  name: null,
  orderDirection: "ASC",
  orderProperty: "NAME",
};

const apolloTracker = (TrackedComponent) => class ApolloTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryVariables: initialVariables,
    };
  }

  _setQueryVariables = (newVariables : {}) => {
    console.log("Setting up new variables", newVariables);
    this.setState({
      queryVariables: newVariables,
    });
  };

  render() {
    return (
      <TrackedComponent
        {...this.props}
        currentVariables={this.state.queryVariables}
        setQueryVariables={this._setQueryVariables}
      />
    );
  }
};

const TrackedFormSection = apolloTracker(
  graphql(filtersQuery, {
    options: ({ currentVariables }) => ({ variables: currentVariables }),
  })(UntrackedFormSection)
);

class UntrackedFormSection extends React.Component {
  render() {
    console.log(this.props.data); // this first render works
    // and I can access this.props.data.entities
    // however whenver the button is clicked and variables are updated
    // https://github.com/apollographql/apollo-client/issues/1389 this happens

    return (
      <button onClick={
        () => this.props.setQueryVariables({
          ...this.props.currentVariables,
          name: "Cok",
        })
      }>Click me</button>
     );
   }
}

This bug seems to disappear if we don't re-render graphql HoC continuously but instead make proper use of the props object of said HoC to update and reduce variables and state respectively.