Fix server side rendering when using the cache-and-network fetchPolicy

Changelog.md

@@ -4,6 +4,8 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNext
 
+- Fix: Render full markup on the server when using the `cache-and-network` fetchPolicy [PR #688](https://github.com/apollographql/react-apollo/pull/688)
+
 ### 1.2.0
 - Fix: Use `standby` fetchPolicy for recycled queries [PR #671](https://github.com/apollographql/react-apollo/pull/671)
 

src/graphql.tsx

@@ -428,7 +428,7 @@ export default function graphql(
 
         const opts = this.calculateOptions() as any;
         if (opts.ssr === false) return false;
-        if (opts.fetchPolicy === 'network-only') {
+        if (opts.fetchPolicy === 'network-only' || opts.fetchPolicy === 'cache-and-network') {
           opts.fetchPolicy = 'cache-first'; // ignore force fetch in SSR;
         }
 

test/react-web/server/index.test.tsx

@@ -186,6 +186,28 @@ describe('SSR', () => {
         });
     });
 
+    it('should allow cache-and-network fetchPolicy as an option and still render prefetched data', () => {
+
+      const query = gql`{ currentUser { firstName } }`;
+      const data = { currentUser: { firstName: 'James' } };
+      const networkInterface = mockNetworkInterface(
+        { request: { query }, result: { data }, delay: 50 }
+      );
+      const apolloClient = new ApolloClient({ networkInterface, addTypename: false });
+
+      const WrappedElement = graphql(query, { options: { fetchPolicy: 'cache-and-network' }})(({ data }) => (
+        <div>{data.loading ? 'loading' : data.currentUser.firstName}</div>
+      ));
+
+      const app = (<ApolloProvider client={apolloClient}><WrappedElement /></ApolloProvider>);
+
+      return getDataFromTree(app)
+        .then(() => {
+          const markup = ReactDOM.renderToString(app);
+          expect(markup).toMatch(/James/);
+        });
+    });
+
     it('should pick up queries deep in the render tree', () => {
 
       const query = gql`{ currentUser { firstName } }`;