support named imports in graphql transformer (#4510)

* support named imports in graphql transformer

fixes #4472

* apply pr feedback

* fixup use PackageManager#require to load dependencies

Co-authored-by: Jasper De Moor <[email protected]>
Co-authored-by: Niklas Mischkulnig <[email protected]>

Author: 3 people

.flowconfig

@@ -10,6 +10,9 @@
 <PROJECT_ROOT>/packages/core/integration-tests/test/input/**
 <PROJECT_ROOT>/packages/core/integration-tests/test/integration/**
 
+[untyped]
+.*/node_modules/graphql/error/GraphQLError.js.flow
+
 [include]
 
 [libs]

package.json

@@ -17,6 +17,7 @@
     "format": "prettier --write \"./packages/*/*/{src,bin,test}/**/*.{js,json,md}\"",
     "link-all": "node scripts/link-all.js packages",
     "unlink-all": "node scripts/unlink-all.js packages",
+    "check": "flow check",
     "lint": "eslint . && prettier \"./packages/*/*/{src,bin,test}/**/*.{js,json,md}\" --list-different",
     "lint:readme": "node scripts/validate-readme-toc.js",
     "precommit": "lint-staged",

packages/core/integration-tests/package.json

@@ -24,8 +24,7 @@
     "core-js": "^3.2.1",
     "cross-env": "^7.0.0",
     "get-port": "^5.0.0",
-    "graphql": "^0.11.7",
-    "graphql-tag": "^2.6.0",
+    "graphql": "^15.0.0",
     "http-proxy-middleware": "^0.19.1",
     "jsdom": "^15.2.1",
     "json5": "^1.0.1",

packages/core/integration-tests/test/graphql.js

@@ -1,7 +1,7 @@
 import assert from 'assert';
 import path from 'path';
-import gql from 'graphql-tag';
 import {bundle, run} from '@parcel/test-utils';
+import {parse, print} from 'graphql/language';
 
 describe('graphql', function() {
   it('should support requiring graphql files', async function() {
@@ -10,8 +10,8 @@ describe('graphql', function() {
     let output = await run(b);
     assert.equal(typeof output, 'function');
     assert.deepEqual(
-      output().definitions,
-      gql`
+      normalize(output()),
+      normalize(`
         {
           user(id: 5) {
             ...UserFragment
@@ -22,7 +22,7 @@ describe('graphql', function() {
           firstName
           lastName
         }
-      `.definitions,
+      `),
     );
   });
 
@@ -34,8 +34,8 @@ describe('graphql', function() {
     let output = await run(b);
     assert.equal(typeof output, 'function');
     assert.deepEqual(
-      output().definitions,
-      gql`
+      normalize(output()),
+      normalize(`
         {
           user(id: 6) {
             ...UserFragment
@@ -52,7 +52,60 @@ describe('graphql', function() {
           address
           email
         }
-      `.definitions,
+      `),
+    );
+  });
+
+  it('should support importing fragments in other graphql files by name', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/graphql-named-import/index.js'),
+    );
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+    assert.deepEqual(
+      normalize(output()),
+      normalize(`
+      query MyQuery {
+        user(id: 6) {
+          ...UserFragment
+          address {
+            ...Address
+          }
+        }
+      }
+
+      fragment UserFragment on User {
+        firstName
+        lastName
+        ...AnotherUserFragment
+      }
+
+      fragment Address on Address {
+        line1
+        county
+        postalCode
+      }
+
+      fragment AnotherUserFragment on User {
+        address
+        email
+      }
+
+      fragment otherUserFragment on User {
+        friends {
+          edges {
+            nodes {
+              name
+            }
+          }
+        }
+      }
+      `),
     );
   });
 });
+
+function normalize(body) {
+  return print(parse(body));
+}

packages/core/integration-tests/test/integration/graphql-named-import/MyQuery.graphql

@@ -0,0 +1,11 @@
+# import UserFragment, Address from './fragments.graphql'
+# import * from "./otherFragments.graphql"
+
+query MyQuery {
+    user(id: 6) {
+        ...UserFragment
+        address {
+            ...Address
+        }
+    }
+}

packages/core/integration-tests/test/integration/graphql-named-import/fragments.graphql

@@ -0,0 +1,17 @@
+#import './moreFragments.graphql'
+
+fragment UserFragment on User {
+    firstName
+    lastName
+    ...AnotherUserFragment
+}
+
+fragment Address on Address {
+    line1
+    county
+    postalCode
+}
+
+fragment Unused on User {
+    email
+}

packages/core/integration-tests/test/integration/graphql-named-import/index.js

@@ -0,0 +1,5 @@
+var MyQuery = require('./MyQuery.graphql');
+
+module.exports = function () {
+  return MyQuery;
+};

packages/core/integration-tests/test/integration/graphql-named-import/moreFragments.graphql

@@ -0,0 +1,4 @@
+fragment AnotherUserFragment on User {
+    address
+    email
+}

packages/core/integration-tests/test/integration/graphql-named-import/otherFragments.graphql

@@ -0,0 +1,9 @@
+fragment otherUserFragment on User {
+    friends {
+        edges {
+            nodes {
+                name
+            }
+        }
+    }
+}

packages/transformers/graphql/package.json

@@ -19,6 +19,7 @@
     "@parcel/plugin": "^2.0.0-alpha.3.1"
   },
   "devDependencies": {
-    "graphql-tag": "^2.10.1"
+    "graphql": "^15.0.0",
+    "graphql-import-macro": "^1.0.0"
   }
 }