diff --git a/Changelog.md b/Changelog.md
index ecfbd1b6d4..1637314bcb 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -4,6 +4,7 @@ Expect active development and potentially significant breaking changes in the `0
### vNext
+- Bug: Fixed issue when context changes in parent container not going through to child; [#162](https://github.com/apollostack/react-apollo/pull/162)
- Bug: Fixed loading state on remount of forceFetch operations; [#161](https://github.com/apollostack/react-apollo/pull/161)
### v0.4.6
diff --git a/src/graphql.tsx b/src/graphql.tsx
index c9c431bc9f..c9ba5928a3 100644
--- a/src/graphql.tsx
+++ b/src/graphql.tsx
@@ -295,8 +295,8 @@ export default function graphql(
this.subscribeToQuery(nextProps);
}
- shouldComponentUpdate(nextProps, nextState) {
- return this.haveOwnPropsChanged || this.hasOperationDataChanged;
+ shouldComponentUpdate(nextProps, nextState, nextContext) {
+ return !!nextContext || this.haveOwnPropsChanged || this.hasOperationDataChanged;
}
componentWillUnmount() {
diff --git a/test/react-web/client/graphql/queries.tsx b/test/react-web/client/graphql/queries.tsx
index e8f00c7250..ae247acda6 100644
--- a/test/react-web/client/graphql/queries.tsx
+++ b/test/react-web/client/graphql/queries.tsx
@@ -876,4 +876,76 @@ describe('queries', () => {
mount();
});
+ it('allows context through updates', (done) => {
+ const query = gql`query people { allPeople(first: 1) { people { name } } }`;
+ const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+ const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
+ const client = new ApolloClient({ networkInterface });
+
+ @graphql(query)
+ class Container extends React.Component {
+ componentWillReceiveProps(props) {
+ expect(props.data.loading).to.be.false;
+ expect(props.data.allPeople).to.deep.equal(data.allPeople);
+ }
+ render() {
+ return {this.props.children}
;
+ }
+ };
+
+ class ContextContainer extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = { color: 'purple' };
+ }
+
+ getChildContext() {
+ return { color: this.state.color };
+ }
+
+ componentDidMount() {
+ setTimeout(() => {
+ this.setState({ color: 'green' });
+ }, 50);
+ }
+
+ render() {
+ return {this.props.children}
;
+ }
+ }
+
+ (ContextContainer as any).childContextTypes = {
+ color: React.PropTypes.string,
+ };
+
+ let count = 0;
+ class ChildContextContainer extends React.Component {
+ render() {
+ const { color } = (this.context as any);
+ if (count === 0) expect(color).to.eq('purple');
+ if (count === 1) {
+ expect(color).to.eq('green');
+ done();
+ }
+
+ count++;
+ return {this.props.children}
;
+ }
+ }
+
+ (ChildContextContainer as any).contextTypes = {
+ color: React.PropTypes.string,
+ };
+
+ mount(
+
+
+
+
+
+
+ );
+ });
+
});