Fix context issues on SSR

Changelog.md

@@ -4,6 +4,7 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNext
 
+- Bug: Fixed SSR issue with context [#165](https://github.com/apollostack/react-apollo/pull/165)
 - 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)
 

src/server.ts

@@ -31,10 +31,11 @@ export function getChildFromComponent(component) {
   return component;
 }
 
+let contextStore = {};
 function getQueriesFromTree(
   { component, context = {}, queries = []}: QueryTreeArgument, fetch: boolean = true
 ) {
-
+  contextStore = assign({}, contextStore, context);
   if (!component) return;
 
   // stateless function
@@ -51,8 +52,6 @@ function getQueriesFromTree(
     let newContext = context;
     if (Component.getChildContext) newContext = assign({}, context, Component.getChildContext());
 
-    context = newContext;
-
     // see if there is a fetch data method
     if (typeof type.fetchData === 'function' && fetch) {
       const query = type.fetchData(ownProps, newContext);
@@ -72,13 +71,18 @@ function getQueriesFromTree(
     }));
   }
 
-  return { queries, context };
+  return { queries, context: contextStore };
 }
 
 // XXX component Cache
 export function getDataFromTree(app, ctx: any = {}, fetch: boolean = true): Promise<any> {
 
+  // reset for next loop
+  contextStore = {};
   let { context, queries } = getQueriesFromTree({ component: app, context: ctx }, fetch);
+  // reset for next loop
+  contextStore = {};
+
   // no queries found, nothing to do
   if (!queries.length) return Promise.resolve(context);
 

test/react-web/server/index.tsx

@@ -194,6 +194,57 @@ describe('SSR', () => {
         ;
     });
 
+    it('should not require `ApolloProvider` to be the root component', (done) => {
+
+      const query = gql`{ currentUser { firstName } }`;
+      const data = { currentUser: { firstName: 'James' } };
+      const networkInterface = mockNetworkInterface(
+        { request: { query }, result: { data }, delay: 50 }
+      );
+      const apolloClient = new ApolloClient({ networkInterface });
+
+      const WrappedElement = graphql(query)(({ data }) => (
+        <div>{data.loading ? 'loading' : data.currentUser.firstName}</div>
+      ));
+
+      class MyRootContainer extends React.Component<any, any> {
+
+        constructor(props) {
+          super(props);
+          this.state = { color: 'purple' };
+        }
+
+        getChildContext() {
+          return { color: this.state.color };
+        }
+
+        render() {
+          return <div>{this.props.children}</div>;
+        }
+      }
+
+      (MyRootContainer as any).childContextTypes = {
+        color: React.PropTypes.string,
+      };
+
+      const app = (
+        <MyRootContainer>
+          <ApolloProvider client={apolloClient}>
+            <WrappedElement />
+          </ApolloProvider>
+        </MyRootContainer>
+      );
+
+      getDataFromTree(app)
+        .then(() => {
+          const markup = ReactDOM.renderToString(app);
+          expect(markup).to.match(/James/);
+          done();
+        })
+        .catch(done)
+        ;
+    });
+
   });
 
   describe('`renderToStringWithData`', () => {