Hot reload and graphql() React component

[zdne]

I have noticed that a react component "with data" obtained by calling graphql(query)(component) doesn't work with HMR. Is this a known issue?

Failing Example

Any change to the SampleComponent (e.g. modifying text in the <p> element) isn't reflected in in HMR (I can se the module gets updated but browser doesn't render it).

class SampleComponent extends React.Component {
  render() {
    let email = 'n/a'
    if (this.props.data.launch_contact) {
      email = this.props.data.launch_contact.email
    }

    return(
      <div>
        <p>Email is '{email}'.</p>
      </div>
    )
  }
}



const MyQuery = gql`
query MyQuery {
  launch_contact(id: 2) {
    email
  }
}
`

const SampleComponentWithData = graphql(MyQuery)(SampleComponent)

...

class TopLevelComponent extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <SampleComponentWithData />
      </ApolloProvider>
    )
  }
}

Working Example

If I wrap SampleComponentWithData within another component the HMR work.

...

class WrapperComponent extends React.Component {
  render() {
    return(
      <div>
        <SampleComponentWithData /> 
        <p>Any update here gets hot-reloaded correctly!</p>
      </div>
    )
  }
}

class TopLevelComponent extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <WrapperComponent />
      </ApolloProvider>
    )
  }
}

HMR also works if I use SampleComponent directly (without Apollo query).

[stubailo]

Could this be the same as apollographql/react-apollo#174?

Either way, this should in in react-apollo because it probably has to do with that integration. Thanks for providing a detailed discussion, let's keep talking there.

[zdne]

Thanks @stubailo I'll move there.