Allow fragments to be imported by name when using the webpack loader (#…

…257)

* Allow fragments to be imported by name when using the webpack loader

Any packages that use graphql-tag/loader under the hood will also benefit.

* Slight README tweaks

* Changelog update

Co-authored-by: hwillson <[email protected]>

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+### v2.12.3 (TBD)
+
+* Allow fragments to be imported by name when using the webpack loader. <br/>
+  [@dobesv](https://github.com/dobesv) in [#257](https://github.com/apollographql/graphql-tag/pull/257)
+
 ### v2.12.2
 
 * Avoid using `Object.assign` to attach extra properties to `gql`. <br/>

README.md

@@ -193,6 +193,31 @@ For **create-react-app** < v2, you'll either need to eject or use [react-app-rew
 
 Testing environments that don't support Webpack require additional configuration. For [Jest](https://facebook.github.io/jest/) use [jest-transform-graphql](https://github.com/remind101/jest-transform-graphql).
 
+#### Support for fragments
+
+With the webpack loader, you can import fragments by name:
+
+In a file called `query.gql`:
+
+```graphql
+fragment MyFragment1 on MyType1 {
+  ...
+}
+
+fragment MyFragment2 on MyType2 {
+  ...
+}
+```
+
+And in your JavaScript:
+
+```javascript
+import { MyFragment1, MyFragment2 } from 'query.gql'
+```
+
+Note: If your fragment references other fragments, the resulting document will
+have multiple fragments in it. In this case you must still specify the fragment name when using the fragment. For example, with `@apollo/client` you would specify the `fragmentName` option when using the fragment for cache operations.
+
 ### Warnings
 
 This package will emit a warning if you have multiple fragments of the same name. You can disable this with:

loader.js

@@ -53,7 +53,7 @@ module.exports = function(source) {
   // at compile time, and then uses those at load time to create minimal query documents
   // We cannot do the latter at compile time due to how the #import code works.
   let operationCount = doc.definitions.reduce(function(accum, op) {
-    if (op.kind === "OperationDefinition") {
+    if (op.kind === "OperationDefinition" || op.kind === "FragmentDefinition") {
       return accum + 1;
     }
 
@@ -161,12 +161,12 @@ module.exports = function(source) {
 
       return newDoc;
     }
-
+    
     module.exports = doc;
     `
 
     for (const op of doc.definitions) {
-      if (op.kind === "OperationDefinition") {
+      if (op.kind === "OperationDefinition" || op.kind === "FragmentDefinition") {
         if (!op.name) {
           if (operationCount > 1) {
             throw "Query/mutation names are required for a document with multiple definitions";

src/tests.ts

@@ -145,7 +145,18 @@ describe('gql', () => {
     assert.equal(Q3[1].name.value, 'F1');
     assert.equal(Q3[2].name.value, 'F2');
 
-  });
+      const F1 = module.exports.F1.definitions;
+      const F2 = module.exports.F2.definitions;
+      const F3 = module.exports.F3.definitions;
+
+      assert.equal(F1.length, 1);
+      assert.equal(F1[0].name.value, 'F1');
+      assert.equal(F2.length, 1);
+      assert.equal(F2[0].name.value, 'F2');
+      assert.equal(F3.length, 1);
+      assert.equal(F3[0].name.value, 'F3');
+
+    });
 
   it('tracks fragment dependencies across nested fragments', () => {
     const jsSource = loader.call({ cacheable() {} }, `
@@ -183,8 +194,22 @@ describe('gql', () => {
     assert.equal(Q1[2].name.value, 'F22');
     assert.equal(Q1[3].name.value, 'F11');
 
-    assert.equal(Q2.length, 1);
-  });
+      assert.equal(Q2.length, 1);
+
+      const F11 = module.exports.F11.definitions;
+      const F22 = module.exports.F22.definitions;
+      const F33 = module.exports.F33.definitions;
+
+      assert.equal(F11.length, 1);
+      assert.equal(F11[0].name.value, 'F11');
+      assert.equal(F22.length, 2);
+      assert.equal(F22[0].name.value, 'F22');
+      assert.equal(F22[1].name.value, 'F11');
+      assert.equal(F33.length, 3);
+      assert.equal(F33[0].name.value, 'F33');
+      assert.equal(F33[1].name.value, 'F22');
+      assert.equal(F33[2].name.value, 'F11');
+    });
 
   it('correctly imports other files through the webpack loader', () => {
     const query = `#import "./fragment_definition.graphql"