Add loader for .graphql files #3909

petetnt · 2018-01-23T21:08:26Z

Important notice

The implicit loader was removed in favor of the macro approach, which gives much more flexibility (for example using different graphql-js version instead of the one shipped with CRA) with little to no code changes.

You can load .gql and .graphql files by installing the graphql-tag.macro from npm and using it like this:

import { loader } from 'graphql.macro';
const A = loader('./assets/graphql.graphql');

The loader statement gets replaced with the actual graphql-tag object on build time and the precomputed object also lowers performance overhead by bit, so it behaves like the loader in this PR did!

OLD PR

This PR adds the .graphql file loading feature discussed in #3873.

A POC of the concept can be found in https://github.com/petetnt/cra-pr-3909-poc/ (might need to link to react-scripts after installing). Tested the following things:

✅ works while developing with yarn start
✅ works after building with yarn build

Also looked at the output after ejecting and it looks correct, couldn't test it yet though after yarn eject due to some version issues 🤷

The PR adds following things:

Ability to load and preprocess .graphql and .gql files with graphql-tag/loader
Updates the README.md and User guide with descriptions and usage
Adds a jest transform so the .graphql files work with tests too

Tested it out with react-apollo and it worked beautifully. Should work with Relay Modern too, but prerequisite for it is #2343

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

iansu · 2018-01-23T21:23:14Z

Nice! On first glance this looks good to me. Can you add an e2e test (in packages/react-scripts/fixtures/kitchensink/src/features/webpack) for importing a .graphql file?

petetnt · 2018-01-23T21:38:52Z

Yep! Working on the tests right now!

viankakrisna · 2018-01-23T21:46:07Z

packages/react-scripts/package.json

@@ -44,9 +44,12 @@
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "fs-extra": "5.0.0",
+    "graphql": "^0.12.3",
+    "graphql-tag": "^2.6.1",


we need to pin these new dependencies

Pinned in d1dd2a8

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

petetnt · 2018-01-23T21:59:10Z

Added tests, running local tests with docker fail on the npm cache clean step, if the tests fail on the CI I'll investigate / fix that and fix the tests again 🤔

iansu · 2018-01-23T22:01:10Z

I don't think the local e2e tests in docker are working properly right now. Let's just see what happens on CI.

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

petetnt · 2018-01-24T10:53:31Z

Tests now pass with 435ece0 on Travis, there's something weird going on at AppVeyor at large.

gaearon · 2018-02-02T20:47:16Z

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -35,7 +35,10 @@ module.exports = (resolve, rootDir, isEjecting) => {
        ? '<rootDir>/node_modules/babel-jest'
        : resolve('config/jest/babelTransform.js'),
      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve(
+      '^.+\\.(gql|graphql)$': isEjecting
+        ? '<rootDir>/node_modules/jest-transform-graphql'


Can't this line just be 'jest-transform-graphql'?

I'm not sure about that. This is just copying the pattern used above for babel-jest.

Hmm. Okay. Let's keep it for now.

gaearon · 2018-02-02T20:48:58Z

packages/react-scripts/template/README.md

@@ -687,6 +688,32 @@ Now running `npm start` and `npm run build` also builds Sass files.

 `node-sass-chokidar` is used here as it addresses these issues.

+## Adding GraphQL files


This section should be after "Adding Images, ..."

petetnt · 2018-02-03T13:46:26Z

Thanks @iansu! 👌

gaearon · 2018-02-03T14:33:58Z

packages/react-scripts/package.json

    "html-webpack-plugin": "2.30.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "22.1.2",
+    "jest-transform-graphql": "2.1.0",


It's kind of frustrating that everybody will "inherit" whole three GQL dependencies after ejecting even if they don't use graphql.

I do agree, but not sure what the other option would be.

Let's remove this dependency. All it does is literally one-line call to webpack loader, and we could do the same in our Jest transform file.

gaearon · 2018-02-03T14:34:25Z

packages/react-scripts/template/README.md

@@ -729,6 +730,32 @@ Please be advised that this is also a custom feature of Webpack.
 **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br>
 An alternative way of handling static assets is described in the next section.

+## Adding GraphQL files
+


This needs to have a note about it being supported only in 2.0.0+, like other similar features.

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

paulomcnally · 2018-03-05T22:55:39Z

Is this available in the version 1.5.2?

petetnt · 2018-03-06T07:39:32Z

@paulomcnally This feature will be available on the upcoming version 2 of CRA. If you want to load .graphql files in 1.5.2., you might want to consider https://github.com/timarney/react-app-rewired to modify the config of CRA to match this PR.

paulomcnally · 2018-03-06T14:41:05Z

Thanks for your answer @petetnt, I'll wait for version 2.x.

* Add graphql loader to webpack config Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update react-scripts README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add integration tests, pin versions in package.json Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Tests expect regexp matchers Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use strict equal test instead Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Escaping is hard Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add comment for signifying a different file * Update docs * Fix jest config * Remove node_modules exclusion * Update README.md * Inline graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update copyright header Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use .graphql extension only Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

See: facebook/create-react-app#3909

* Add graphql loader to webpack config Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update react-scripts README.md Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add integration tests, pin versions in package.json Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Tests expect regexp matchers Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use strict equal test instead Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Escaping is hard Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Add comment for signifying a different file * Update docs * Fix jest config * Remove node_modules exclusion * Update README.md * Inline graphql jest transform Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Update copyright header Signed-off-by: petetnt <pete.a.nykanen@gmail.com> * Use .graphql extension only Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

silentlight · 2018-10-10T23:38:30Z

I cannot seem to load .graphql files using CRA version 2.0.3.

Here are my packages in package.json

    "apollo-link": "^1.2.3",
    "apollo-link-error": "^1.1.1",
    "apollo-link-http": "^1.5.5",
    "axios": "^0.18.0",
    "babel-plugin-dynamic-import-node": "^2.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-app": "^3.1.1",
    "compression": "^1.7.3",
    "cross-env": "^5.2.0",
    "env-cmd": "^8.0.2",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.0",
    "graphql.macro": "^1.0.2",
    "ignore-styles": "^5.0.1",
    "node-fetch": "^2.2.0",
    "pm2": "^3.2.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-loadable": "^5.3.1",
    "react-scripts": "^2.0.3",
    "styled-components": "^3.4.9",
    "url-loader": "^1.0.1"

Here is how I import it:

import pageDataQuery from '../../graphql/queries/pageData.graphql';

The error I am getting is Unexpected token inside of my .graphql file. Do I need to do anything else after installing graphql-tag? Any help would be greatly appreciated.

Thanks

psamd · 2018-10-17T12:58:30Z

@silentlight the support for 'graphql-tag/loader' was removed #5076

Try using any one of these macros:

Or just eject your app and add the 'graphql-tag/loader' in your webpack config files (dev & prod)

// The GraphQL loader preprocesses GraphQL queries in .graphql files.
{
  test: /\.(graphql)$/,
  loader: 'graphql-tag/loader',
},

chrisdostert · 2018-10-18T18:04:32Z

why was this reverted? this functionality was awesome

petetnt · 2018-10-18T18:14:19Z

Hi @chrisdostert!

The implicit loader was removed in favor of the macro approach, which gives much more flexibility (for example using different graphql-js version instead of the one shipped with CRA) with little to no code changes.

You can load .gql and .graphql files by installing the graphql-tag.macro from npm and using it like this:

import { loader } from 'graphql.macro';
const A = loader('./assets/graphql.graphql');

The loader statement gets replaced with the actual graphql-tag object on build time and the precomputed object also lowers performance overhead by bit!

chrisdostert · 2018-10-18T19:40:43Z

thx @petetnt for response.
This is opinionated, but personally the simplicity of single import & no additional direct dependency was quite nice & seemed to be more in line w/ the way CRA has approached features in general.
Again, opinionated.

iansu · 2018-10-18T20:06:21Z

As @petetnt mentioned, the main downside to this approach is that you're stuck with whatever version of graphql-js Create React App uses. And the only way to upgrade would be for CRA to update the version and then for you to upgrade to that new version of CRA in your project.

While using macros requires a bit of extra work we think the flexibility is worth the tradeoff. It also means we don't have to add loaders for every conceivable file type or for different tools (CSS-in-JS libraries for example).

delmendo · 2018-11-29T22:28:17Z

Feels like someone should put an alert here - the macro version hits a bug in babel so it never reloads your graphql files :(

#5580

masull · 2018-12-28T20:15:03Z

graphql.macro does not seem to work with a .graphql file that contains multiple operations.

./queries.graphql
query Query1 {
query1 {
...
query Query2 {
query2{
…

import {loader} from 'graphql.macro';
const {Query1, Query2} = loader('./queries.graphql');

Query1 and Query2 are undefined.

petetnt added 4 commits January 23, 2018 20:49

Add graphql loader to webpack config

7b278c1

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Update README.md

123e89e

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Update react-scripts README.md

c64c25c

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Add graphql jest transform

53e215f

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

facebook-github-bot added the CLA Signed label Jan 23, 2018

petetnt mentioned this pull request Jan 23, 2018

Support Relay Modern and Apollo out of the box #3873

Closed

viankakrisna reviewed Jan 23, 2018

View reviewed changes

Add integration tests, pin versions in package.json

d1dd2a8

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

iansu added this to the 2.0.0 milestone Jan 23, 2018

petetnt added 3 commits January 24, 2018 10:39

Tests expect regexp matchers

f32d3fd

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Use strict equal test instead

3a14cd1

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Escaping is hard

435ece0

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

Add comment for signifying a different file

0860029

gaearon assigned iansu Feb 2, 2018

gaearon reviewed Feb 2, 2018

View reviewed changes

iansu added 4 commits February 2, 2018 14:12

Update docs

eeed28f

Merge next into branch

683d818

Fix jest config

e68515d

Remove node_modules exclusion

786ee4a

gaearon reviewed Feb 3, 2018

View reviewed changes

petetnt added 2 commits February 3, 2018 16:37

Update README.md

5198496

Inline graphql jest transform

ce2e153

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

patrick91 mentioned this pull request Mar 3, 2018

Add loader for .graqhql files wmonk/create-react-app-typescript#270

Open

jpdorsy mentioned this pull request Mar 22, 2018

Module not found: Can't resolve 'module' in '/Users/Documents/git/project-name/node_modules/require-from-string' evenchange4/graphql.macro#25

Closed

yoiang pushed a commit to Adorkable-forkable/create-react-app-typescript that referenced this pull request May 2, 2018

Add loader for .graqhql files

983002c

See: facebook/create-react-app#3909

patrick91 added a commit to patrick91/create-react-app-typescript that referenced this pull request May 14, 2018

Add loader for .graqhql files

d68ffec

See: facebook/create-react-app#3909

SaraVieira mentioned this pull request Jun 27, 2018

add gql file extension #4691

Closed

steobrien mentioned this pull request Aug 13, 2018

babel-preset-react-app: add babel-plugin-relay #2343

Closed

kassens mentioned this pull request Aug 15, 2018

Consider decoupling CRA 2.0 from graphql-tag version #4893

Closed

Timer added a commit to Timer/create-react-app that referenced this pull request Sep 24, 2018

Revert "Add loader for .graphql files (facebook#3909)"

6e2c0d7

Timer added a commit that referenced this pull request Sep 24, 2018

Revert "Add loader for .graphql files (#3909)" (#5076)

03a7091

zmitry pushed a commit to zmitry/create-react-app that referenced this pull request Sep 30, 2018

Revert "Add loader for .graphql files (facebook#3909)" (facebook#5076)

d80d9c7

petetnt mentioned this pull request Oct 18, 2018

Document .graphql and .gql file loading with graphql.macro #5481

Merged

glennreyes mentioned this pull request Nov 7, 2018

Changes in a .graphql file doesn't recompile automatically #5744

Closed

lock bot locked and limited conversation to collaborators Jan 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add loader for .graphql files #3909

Add loader for .graphql files #3909

petetnt commented Jan 23, 2018 •

edited

iansu commented Jan 23, 2018

petetnt commented Jan 23, 2018

viankakrisna Jan 23, 2018

petetnt Jan 23, 2018

petetnt commented Jan 23, 2018

iansu commented Jan 23, 2018

petetnt commented Jan 24, 2018

gaearon Feb 2, 2018

iansu Feb 2, 2018

gaearon Feb 2, 2018

gaearon Feb 2, 2018

petetnt commented Feb 3, 2018

gaearon Feb 3, 2018

petetnt Feb 3, 2018

gaearon Feb 3, 2018

petetnt Feb 3, 2018

gaearon Feb 3, 2018

petetnt Feb 3, 2018

paulomcnally commented Mar 5, 2018

petetnt commented Mar 6, 2018

paulomcnally commented Mar 6, 2018

silentlight commented Oct 10, 2018 •

edited

psamd commented Oct 17, 2018

chrisdostert commented Oct 18, 2018

petetnt commented Oct 18, 2018

chrisdostert commented Oct 18, 2018

iansu commented Oct 18, 2018

delmendo commented Nov 29, 2018 •

edited

masull commented Dec 28, 2018

		@@ -687,6 +688,32 @@ Now running `npm start` and `npm run build` also builds Sass files.

		`node-sass-chokidar` is used here as it addresses these issues.

		## Adding GraphQL files

Add loader for .graphql files #3909

Add loader for .graphql files #3909

Conversation

petetnt commented Jan 23, 2018 • edited

Important notice

OLD PR

iansu commented Jan 23, 2018

petetnt commented Jan 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petetnt commented Jan 23, 2018

iansu commented Jan 23, 2018

petetnt commented Jan 24, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petetnt commented Feb 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulomcnally commented Mar 5, 2018

petetnt commented Mar 6, 2018

paulomcnally commented Mar 6, 2018

silentlight commented Oct 10, 2018 • edited

psamd commented Oct 17, 2018

chrisdostert commented Oct 18, 2018

petetnt commented Oct 18, 2018

chrisdostert commented Oct 18, 2018

iansu commented Oct 18, 2018

delmendo commented Nov 29, 2018 • edited

masull commented Dec 28, 2018

petetnt commented Jan 23, 2018 •

edited

silentlight commented Oct 10, 2018 •

edited

delmendo commented Nov 29, 2018 •

edited