From 2e623c273ec54d010b80acb281c6df45f201f9d9 Mon Sep 17 00:00:00 2001
From: Vladimir Guguiev <wizardzloy@gmail.com>
Date: Sat, 27 Aug 2016 22:18:32 +0300
Subject: [PATCH] fix SSR when query contains fragments

---
 src/graphql.tsx                 |  5 ++++-
 test/react-web/server/index.tsx | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/graphql.tsx b/src/graphql.tsx
index c9ba5928a3..4d51d18687 100644
--- a/src/graphql.tsx
+++ b/src/graphql.tsx
@@ -324,7 +324,9 @@ export default function graphql(
         }
 
         const { reduxRootKey } = this.client;
-        const { variables, forceFetch } = this.calculateOptions(this.props);
+        const queryOpts = this.calculateOptions(this.props);
+        calculateFragments(queryOpts);
+        const { variables, forceFetch, fragments } = queryOpts;
         let queryData = defaultQueryData as any;
         queryData.variables = variables;
         if (!forceFetch) {
@@ -333,6 +335,7 @@ export default function graphql(
               store: this.store.getState()[reduxRootKey].data,
               query: document,
               variables,
+              fragmentMap: createFragmentMap(fragments as FragmentDefinition[]),
             });
 
             const refetch = (vars) => {
diff --git a/test/react-web/server/index.tsx b/test/react-web/server/index.tsx
index 4993f3c48b..02e109bd53 100644
--- a/test/react-web/server/index.tsx
+++ b/test/react-web/server/index.tsx
@@ -1,7 +1,7 @@
 import * as chai from 'chai';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
-import ApolloClient, { createNetworkInterface } from 'apollo-client';
+import ApolloClient, { createNetworkInterface, createFragment } from 'apollo-client';
 import { graphql, ApolloProvider } from '../../../src';
 import { getDataFromTree, renderToStringWithData } from '../../../src/server';
 import 'isomorphic-fetch';
@@ -353,5 +353,36 @@ describe('SSR', () => {
         })
         .catch(done);
     });
+
+    it('should work with queries that use fragments', function(done) {
+      const query = gql`{ currentUser { ...userInfo } }`;
+      const userInfoFragment = createFragment(gql`fragment userInfo on User { firstName, lastName }`);
+      const data = { currentUser: { firstName: 'John', lastName: 'Smith' } };
+      const networkInterface = {
+        query: () => Promise.resolve({ data })
+      };
+      const apolloClient = new ApolloClient({ networkInterface });
+
+      const UserPage = graphql(query, {
+        options: {
+          fragments: userInfoFragment
+        }
+      })(({ data }) => (
+          <div>{data.loading ? 'Loading...' : `${data.currentUser.firstName} ${data.currentUser.lastName}`}</div>
+      ));
+
+      const app = (
+          <ApolloProvider client={apolloClient}>
+            <UserPage />
+          </ApolloProvider>
+      );
+
+      renderToStringWithData(app)
+          .then(markup => {
+            expect(markup).to.match(/John Smith/);
+            done();
+          })
+          .catch(done);
+    });
   });
 });