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( + + + + + + + ); + }); + });