diff --git a/src/graphql.tsx b/src/graphql.tsx
index 0d65e92594..d44feecb71 100644
--- a/src/graphql.tsx
+++ b/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 = {};
diff --git a/test/react-web/client/graphql/fragments.test.tsx b/test/react-web/client/graphql/fragments.test.tsx
index 9cb28a6a4a..631f21cd4b 100644
--- a/test/react-web/client/graphql/fragments.test.tsx
+++ b/test/react-web/client/graphql/fragments.test.tsx
@@ -173,5 +173,43 @@ describe('fragments', () => {
renderer.create();
});
+ 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 {
+ componentWillReceiveProps(props) {
+ expect(props.data.loading).toBe(false);
+ expect(props.data.allShips).toEqual(data.allShips);
+ done();
+ }
+ render() {
+ return null;
+ }
+ };
+
+ renderer.create();
+ });
+
});