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