React-apollo: Useless re-render component with `graphql(MYQUERY)(Navbar)` everytime.

[ghost]

Intended outcome:

Do not re-render simply component in App with graphql(MYQUERY)(Navbar) everytime when I change route because I already have query results in cache.

Actual outcome:

It re-renders my Navbar component useless. It doesn't need re-render because graphql(MYQUERY) already in cache.

How to reproduce the issue:

Simply go here: https://codesandbox.io/s/zqk59nkmk4 and click "Home" and "Players". In console you will see "Navbar this.props e nextProps different" every time you change route.

Version

• [email protected]
• [email protected]

@jbaxleyiii, maybe the same as: https://github.com/apollographql/react-apollo/issues/1777 ?

@tnrich, maybe the same as: https://github.com/apollographql/react-apollo/issues/1870 ?

[ghost]

Here there is the same problem with Query component and without graphql HOC.

[quentin-]

I believe this is react-router rerending your Navbar.
You can try for yourself by removing all graphql related code in your example.

[loonywizard]

Having the same Issue, Query rerenders when changing route in React Router

[casperle]

Hi guys, is there any plan to fix this issue?

[adorum]

Same here. I'am afraid rerender happening because graphql HOC produce each time new instance of query object into props even if data are same.

My workaround with recompose:
```
...
graphql(MYQUERY)
branch(({ data }) => data.loading, renderComponent(LoadingComponent)),
lifecycle({
shouldComponentUpdate(nextProps) {
//compare query response data from current and next props
}
})

[casperle]

@adorum I was thinking to create a variable outside the graphql() HOC, and provide the same references of first level objects of data props in graphql() second arguments (the config object) props property. But this is just an overhead - it would be better to solve it inside graphql().
example:

const propsData = {};

graphql(MY_QUERY, {
  props: (data) => {
    // do the magic with propsData 
  }
})

[hwillson]

This should no longer be an issue with current day versions of react-apollo, but if anyone is still encountering this issue (and can provide a small runnable reproduction), we'll take a look. Thanks!