Try to fix fragments with noGraphQlTag

packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts

@@ -91,10 +91,26 @@ export class ClientSideBaseVisitor<TRawConfig extends RawClientSideBasePluginCon
 
   protected _includeFragments(fragments: string[]): string {
     if (fragments && fragments.length > 0) {
-      return `${fragments
-        .filter((name, i, all) => all.indexOf(name) === i)
-        .map(name => '${' + name + '}')
-        .join('\n')}`;
+      if (this.config.noGraphQLTag) {
+        return `${fragments
+          .filter((name, i, all) => all.indexOf(name) === i)
+          .map(name => {
+            const found = this._fragments.find(f => `${f.name}FragmentDoc` === name);
+
+            if (found) {
+              return print(found.node);
+            }
+
+            return null;
+          })
+          .filter(a => a)
+          .join('\n')}`;
+      } else {
+        return `${fragments
+          .filter((name, i, all) => all.indexOf(name) === i)
+          .map(name => '${' + name + '}')
+          .join('\n')}`;
+      }
     }
 
     return '';

packages/plugins/typescript/react-apollo/tests/react-apollo.spec.ts

@@ -32,6 +32,47 @@ describe('React Apollo', () => {
     validateTs(merged, undefined, true);
   };
 
+  describe('Issues', () => {
+    it('Issue #2080 - noGraphQLTag does not work with fragments correctly', async () => {
+      const docs = [
+        {
+          filePath: '',
+          content: parse(/* GraphQL */ `
+            query test {
+              feed {
+                id
+                commentCount
+                repository {
+                  ...RepositoryFields
+                }
+              }
+            }
+
+            fragment RepositoryFields on Repository {
+              full_name
+              html_url
+              owner {
+                avatar_url
+              }
+            }
+          `),
+        },
+      ];
+      const content = (await plugin(
+        schema,
+        docs,
+        {
+          noGraphQLTag: true,
+        },
+        {
+          outputFile: 'graphql.tsx',
+        }
+      )) as Types.ComplexPluginOutput;
+      // make sure the fragment is there twice.
+      expect(content.content.split('{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RepositoryFields"}').length).toBe(3);
+    });
+  });
+
   describe('Imports', () => {
     it('should import React and ReactApollo dependencies', async () => {
       const docs = [{ filePath: '', content: basicDoc }];