Fragment definitions within a graphql document ought to be unique.

This is a rehash of apollo-client#906, introduced again because the new fragment interpolation pattern doesn’t go through the addFragmentsToDocument method that we fixed in apollo-client#913 to remove duplicate fragments.

While a recent change in graphql-tag no longer “warns” when duplicate fragments are in a document, we should probably strip the duplicate fragment from the document altogether in either graphql-tag or apollo-client since this will through errors when getting parsed on the server. Optionally we could consider stripping duplicate fragment definitions from the document altogether; although in the aforementioned commit, @tmeasday says

Note that we are simply checking fragment strings for equality, not ensuring that fragment definitions within the larger graphql document have exact equality. We could do the above, but it’d be quite a bit more complicated, and I’m not sure if there’s much benefit. AFAICT the main reason for wanting that before was exactly this functionality.

Steps to Reproduce

Interpolating multiple fragments into the same document generates an invalid GraphQL document:

query {
   ...SomeFragment
}
${SomeFragment}
${SomeFragment}

generates a document like

query {
  ...SomeFragment
}
fragment SomeFragment on SomeResource {
  field
}
fragment SomeFragment on SomeResource {
  field
}

which is invalid (and a server may choke on an invalid GraphQL doc).

I filed this here instead of in apollo-client as the related commit I mentioned above asks why there’d be a benefit to de-duplicating fragments within the document, but this happens more often when the same fragment gets interpolated into the same document twice from different places in the query, not necessarily that the fragment itself is already defined in the document.

[jameswyse]

I ran in to this issue as well and threw together a quick workaround:

// schema/utils.js
const requireFragment = require.context('schema/fragments', true, /\.(graphql|gql)$/);
const requireQuery = require.context('schema/queries', true, /\.(graphql|gql)$/);
const requireMutation = require.context('schema/mutations', true, /\.(graphql|gql)$/);

export function removeDuplicateFragments (doc) {
  const usedFragments = {};

  doc.definitions = doc.definitions.filter(def => {
    const included = def.kind !== 'FragmentDefinition' || !usedFragments[def.name.value];
    if (included) {
      usedFragments[def.name.value] = true;
    }
    return included;
  });

  return doc;
}

export function getQuery (name) {
  const doc = requireQuery(`./${name}.gql`);
  return removeDuplicateFragments(doc);
}

export function getFragment (name) {
  const doc = requireFragment(`./${name}.gql`);
  return removeDuplicateFragments(doc);
}

export function getMutation (name) {
  const doc = requireMutation(`./${name}.gql`);
  return removeDuplicateFragments(doc);
}

With a directory structure like:

schema
├── utils.js
├── fragments
│   ├── foo.gql
│   ├── bar.gql
│   ├── baz.gql
├── mutations
│   ├── createFoo.gql
│   ├── createBar.gql
│   ├── createBaz.gql
├── queries
│   ├── someQuery.gql
│   ├── anotherQuery.gql

I can then do @graphql(getQuery('someQuery')) instead of importing directly. Hope it helps 😃

[czert]

This is still an issue when using graphql-tag/loader and the new #import feature. If a query uses two fragments, both of which #import a third fragment, this third fragment will end up duplicated in the resulting document.

I saw that this was mentioned in PR #28. If you can point me in the right direction, I’d be happy to work on deduplication in the webpack loader.