Merge pull request #281 from apollostack/nested-fragments

Fix nested fragment arrays

src/graphql.tsx

@@ -6,6 +6,7 @@ import {
 
 // modules don't export ES6 modules
 import pick = require('lodash.pick');
+import flatten = require('lodash.flatten');
 import shallowEqual from './shallowEqual';
 
 import invariant = require('invariant');
@@ -162,6 +163,10 @@ export default function graphql(
       }
       if (newOpts) opts = assign({}, opts, newOpts);
 
+      if (opts.fragments) {
+        opts.fragments = flatten(opts.fragments);
+      }
+
       if (opts.variables || !operation.variables.length) return opts;
 
       let variables = {};

test/react-web/client/graphql/fragments.test.tsx

@@ -173,5 +173,43 @@ describe('fragments', () => {
     renderer.create(<ProviderMock client={client}><Container /></ProviderMock>);
   });
 
+  it('correctly allows for passed fragments in an array', (done) => {
+    const query = gql`
+      query ships { allShips(first: 1) { __typename ...Ships } }
+    `;
+    const shipFragment = createFragment(gql`
+      fragment Ships on ShipsConnection { starships { name } }
+    `);
+
+    const mockedQuery = gql`
+      query ships { allShips(first: 1) { __typename ...Ships } }
+      fragment Ships on ShipsConnection { starships { name } }
+    `;
+
+    const data = {
+      allShips: { __typename: 'ShipsConnection', starships: [ { name: 'CR90 corvette' } ] },
+    };
+    const networkInterface = mockNetworkInterface(
+      { request: { query: mockedQuery }, result: { data } }
+    );
+    const client = new ApolloClient({ networkInterface, addTypename: false });
+
+    @graphql(query, {
+      options: () => ({ fragments: [shipFragment]}),
+    })
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(props) {
+        expect(props.data.loading).toBe(false);
+        expect(props.data.allShips).toEqual(data.allShips);
+        done();
+      }
+      render() {
+        return null;
+      }
+    };
+
+    renderer.create(<ProviderMock client={client}><Container /></ProviderMock>);
+  });
+
 
 });