fix SSR when query contains fragments (#178)

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) => {

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